Question

我有一个非常简单的表单，只有一个输入字段：

this.form = this.fb.group({
  emailAddress: ['', [Validators.required, Validators.email]],
});

标记：

<input type="email" class="form-control" formControlName="emailAddress">

此字段有两个验证器，必填，用于电子邮件。

我还有一个提交按钮，其配置如下：

<button [disabled]="!form.valid" type="submit">Send</button>

令人困惑的是，当我输入错误的电子邮件地址时，例如：

a @ b

启用提交按钮，从而将表单和输入字段标记为有效。我希望a@b不是有效的电子邮件地址。

我还应该使用其他的电子邮件验证器吗？或者这是一个错误？

Answer 1

您可以使用模式实施有效的电子邮件

 ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email,Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
            password: ['', [Validators.required, Validators.minLength(6)]]
        });
    }

示例：https://stackblitz.com/edit/angular-email-validation

Answer 2

这是一个有效的电子邮件地址，因此为什么要通过验证。如果不满意，则可以创建自己的验证器并在其中实现逻辑。

您可以阅读更多Custom Validators，并尝试实施您的产品。

Answer 3

您可以使用自定义电子邮件验证

我已在 Stackblitz

上创建了一个演示

Component.html

<form [formGroup]="myForm">
    <input type="email" class="form-control" formControlName="emailAddress" placeholder="Enter email">
    <button [disabled]="!myForm.valid" type="submit">Send</button>
</form>

Component.ts

myForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      emailAddress: [null, [Validators.required, this.emailValidator]]
    });
  }

  emailValidator(control) {
    if (control.value) {
      const matches = control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/);
      return matches ? null : { 'invalidEmail': true };
    } else {
      return null;
    }
  }

Answer 4

对于angular，只需添加属性“ email”，如下所示：

<label for="email">Email</label>
<input type="email" id="email" name="email" #email="ngModel"
       ngModel class="form-control" email required>
<span class="help-block" *ngIf="!email.valid && email.touched">
     Email is invalid
</span>

Angular Form电子邮件验证程序无法正常工作

4 个答案: