Проверка FormBuilder не работает должным образом

Question

У меня есть эта форма, которая реализует FormBuilder.

Мне нужно показать свое пользовательское сообщение проверки в поле ввода. С моим кодом ниже, валидатор может заставить красный «неправильный» текст появляться всякий раз, когда поле ввода пустое, но оно не показывает мою пользовательскую проверку.

Пожалуйста, смотрите код ниже для .html и .ts

<form [formGroup]="subscriptionForm">
      <h3 style="color: gray; text-align: center;">Registration</h3>
      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" name='UserName' id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
            <div *ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)" class="alert alert-danger">
              <div *ngIf="UserName?.errors.required">
                Username is required.
              </div>
            </div>
          </div>
        </div>
      </div>
</form>

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
      UserName: [null, Validators.required],
    });
}

Я просмотрел документы по проверке формы Angular - вот где я получил свои коды, но я не могу понять, как это правильно. Спасибо.

Answer 1

Для доступа к модели формы вам необходимо использовать subscriptionForm.get('UserName'). Чтобы это работало правильно, я бы установил в вашей модели начальное значение пустой строки вместо null:

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
    UserName: ['', Validators.required],
  });

  // also, make access easier using a property...
  get UserName { return this.subscriptionForm.get('UserName'); }
}

Answer 2

Попробуйте изменить

*ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)"

К

*ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched"

По виду:

<div *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" class="alert alert-danger">
    Username is required.
</div>

Пожалуйста, попробуйте это Демо:

https://stackblitz.com/edit/angular-5xtbxm?file=app/app.component.html

Answer 3

Проблема в том, что вам не хватает методов получения из документов, например:

get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

Так что теперь, когда они получают доступ к name в своем шаблоне, они фактически получают доступ к this.heroForm.get('name')

ТАК, что вы должны сделать в вашем *ngIf, это проверить:

subscriptionForm.get('UserName').errors.required

Answer 4

используйте subscriptionForm.controls.UserName вместо UserName на ваш взгляд