Angular 9 ReactiveFormsModule - 电子邮件验证答案

【问题标题】：Angular 9 ReactiveFormsModule - email validationAngular 9 ReactiveFormsModule - 电子邮件验证
【发布时间】：2020-06-18 10:44:23
【问题描述】：

我目前面临正确验证电子邮件的问题：
如果我设置“Validators.email”然后：me@host 被验证为真，这不适合我的情况。

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 example

请解决...

【问题讨论】：

你能分享你的模板/hmtl吗？
@LaminooLawrance 我提供了 stackblitz 链接。你可以看到.. test@test 被验证为一个有效的电子邮件地址，我不想要那个.. 它应该是 test@host.domain 而不是另一个。

标签： angular angular-reactive-forms angular9

【解决方案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 };
    }
  };
}

【讨论】：

你有 stackblitz 的例子吗？

【解决方案2】：

我认为您没有在 HTML 的输入元素中设置 type=email

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

另外，您不需要使用模式来验证电子邮件，您可以简单地将电子邮件设置为以下验证器之一，

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

Stackblitz

【讨论】：

我已经提供了 stackblitz 链接。你可以看到.. test@test 被验证为一个有效的电子邮件地址，我不想要那个.. 它应该是 test@host.domain 而不是另一个。