Почему методы получения ошибок формы не работают в моем Angular Реактивном шаблоне компонента формы, а прямая ссылка работает?

Question

быстрый вопрос. Это одна из тех маленьких раздражающих ошибок. У меня Angular реактивная форма в лениво загруженном модуле регистрации. Структура кода выглядит следующим образом:

TS

get email() {
  return this.myForm.get('email');
}
// This code works from within the component, but not when referenced from within the template.

HTML

<div class="errors" *ngIf="email.errors?.required && email.touched">Must enter email</div>

В шаблоне div никогда не отображается, поскольку выражение никогда не вычисляется как правда, даже при наличии ошибок. Я проверил в консоли.

Что более запутанно, так это то, что у меня нет проблем с использованием геттера из component.ts, на самом деле, как я console.log, пишу console.log(this.email.errors). И это прекрасно работает. Но не в шаблоне.

Мое грязное решение заключается в прямом доступе к ошибкам, и работает :

<div class="errors" *ngIf="myForm.controls.email.errors.required && myForm.controls.email.touched">
  Must enter email
</div>
// This works! As you can see the expression is very long and messy.

Любая помощь приветствуется!

Answer 1

Вы случайно не используете ссылочную переменную шаблона #email в поле ввода, например: <input #email ...>?

Это могло бы объяснить проблему. Я сделал Stackblitz, который воспроизводит ошибку: https://stackblitz.com/edit/angular-qyt7kb

В этом примере вход firstName имеет переменную ссылки на шаблон #firstName И div ошибки никогда не отображается. Ошибка div lastName отображается правильно.

<form [formGroup]="form">

    <label>
      First Name:
      <input #firstName type="text" formControlName="firstName">
    </label>
    <div *ngIf="firstName.errors?.required && firstName.touched">*FIRST Name is Required</div>

    <label>
      Last Name:
      <input type="text" formControlName="lastName">
    </label>
    <div *ngIf="lastName.errors?.required && lastName.touched">*LAST name is Required</div>

</form>

Таким образом, похоже, что в шаблоне ссылочная переменная шаблона имеет приоритет над получателем с тем же именем в файле TS. В примере вы можете видеть, что console.log печатает ошибки правильно, как вы сказали.

Answer 2

Чтобы использовать Reactive Forms, убедитесь, что вы используете директивы formGroup и formControlName в своем шаблоне следующим образом:

<form (ngSubmit)="submit()" [formGroup]="myForm">
    <label for="username">Username</label>
    <input type="text" id="username" formControlName="username">
    <span *ngIf="username.getError('required') &&
              (username.dirty || username.touched)">
      Username is required
    </span>

    <label for="password">Password</label>
    <input type="password" id="password" formControlName="password">
    <span *ngIf="myForm.get('password').getError('required') &&
              (myForm.get('password').dirty || myForm.get('password').touched)">
      Password is required
    </span>

    <input type="submit" value="Submit">
</form>

Затем определите ваш FormGroup экземпляр, валидаторы и получатель функции:

  myForm: FormGroup = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

  get username() {
    return this.myForm.get('username');
  }

  get password() {
    return this.myForm.get('password');
  }

После этого вы можете использовать функцию получения для проверки (как имя пользователя в шаблоне) или использовать прямую ссылку с myForm.get('password').getError('required') (как пароль в шаблоне).

Посмотрите пример входа в систему с обоими способами доступа к ошибкам в Реактивных формах в Angular здесь: https://stackblitz.com/edit/reactive-forms-get-errors

Дайте мне знать, если это поможет!