Как правильно реализовать собственный валидатор регулярных выражений для реактивной формы в Angular 6?

Question

Я использую Angular 6. Я пытаюсь проверить электронную почту, используя шаблон регулярного выражения, но не могу. Проблема в том, когда я пытаюсь проверить этот код. Внизу появляется сообщение об ошибке:

ReactiveFormComponent.html: 12 ОШИБКА TypeError: Невозможно прочитать свойство 'pattern' с нулевым значением

// ts file

   constructor(private fb: FormBuilder) {
   this.personForm = fb.group({
  'emailAddress': ['', Validators.compose ([Validators.required, 
   Validators.pattern(this.emailPattern)])],
});
}

// html файл

<mat-form-field fxFlex>
  <input matInput placeholder="Email" formControlName="emailAddress">
  <mat-error *ngIf="personForm.controls['emailAddress'].errors.pattern">
    Invalid Email.
  </mat-error>
</mat-form-field>

Answer 1

Этот вопросительный знак решает вашу проблему:

*ngIf="personForm.controls['emailAddress'].errors?.pattern"

Для допустимого входного содержимого свойство errors имеет значение null. И в null действительно нет свойства pattern. Вы можете увидеть это, если добавление значения изменяет прослушиватель и регистрирует значение свойства errors для другого входного содержимого:

ngOnInit() {
  this.personForm.get('emailAddress').valueChanges.subscribe(_ => {
    console.log(this.personForm.get('emailAddress').errors);
  });
}

Вот стек пример