反应式表单电子邮件字段验证未正确进行

Question

我有以下用于电子邮件字段验证的代码。但它没有正确验证。如果电子邮件字段无效，我将禁用验证按钮。以下是我面临的问题。

输入 nan - 按钮被禁用（这工作正常） nan@ - 按钮被禁用（这很好用） nan@g - 验证按钮已启用（理想情况下应该禁用，因为电子邮件无效） 南@gmail。 - 按钮被禁用（这工作正常） nan@g.com - 验证按钮已启用（理想情况下应该禁用，因为电子邮件无效）

只有在用户输入 nan@gmail.com 时才应启用验证按钮。我如何做到这一点？它应该进行完整的格式验证检查。

<input type="email" id="email" class="form-control" (keyup)="checkValue($event)" formControlName="inputValue">
                    <button type="button" id="verifyBtn"  [disabled]="personalDtlsForm.get('inputValue').invalid" class="btn btn-primary btn-large" (click)="verify()">Verify</button>


 this.personalDtlsForm = this.formBuilder.group({
      inputValue: [null, [Validators.required, Validators.email]]
});

Answer 1

Validators.email 是一种非常基本的电子邮件验证方法。我建议您使用正则表达式模式进行电子邮件验证。您可以查看此here 了解更多信息。