Angular 9 ReactiveFormsModule - проверка электронной почты

Question

В настоящее время я сталкиваюсь с проблемой правильного получения электронного письма:
Если я установлю «Validators.email», то: me@host будет проверено на true, что не подходит в моем случае.

me@host не должен проверяться,
me@host.domain должен проверяться.

Я пробовал следующие два метода, но ни один из них не помогает. Требуется только правильная проверка, но не подтверждение по электронной почте.

Email: new FormControl('', [
  Validators.required,
  Validators.pattern('^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]+$')
])

Email: new FormControl('', Validators.compose([
  Validators.required,
  Validators.pattern('^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]+$')
]))

Пример Stackblitz

решения, пожалуйста ...

Answer 1

Я использую как ниже, чтобы подтвердить адрес электронной почты

/**
   * Actual validator function
   * @param ctrl FormControl that contains the input validation state
   */
  return function emailValidator(ctrl: FormControl) {
    if (ctrl && ctrl.value) {
      const value: string = ctrl.value;
      // tslint:disable-next-line
      const regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      // tslint:disable-next-line
      const isValidEmail = regEx.test(value)

      // signify to the Angular form control whether the value is valid
      return isValidEmail ? null : { email: true };
    }
  };
}

Answer 2

Я думаю, вы не устанавливаете type=email в своем элементе ввода в HTML

<input  type="email"
      name="Email"
      [formControl]="form.controls['Email']"
    />

Кроме того, вам не нужно использовать шаблон для проверки электронной почты, вы можете просто установить электронную почту как один из валидаторов, как показано ниже,

this.form = this.formBuilder.group({
  Email: ["", Validators.compose([Validators.required, Validators.email])]
});

Stackblitz