Question

我正在尝试在电子邮件表单字段中仅接受默认域。

但是，如果我输入无效的电子邮件域，则会收到预期的错误。

如果我先输入有效的电子邮件地址，则可以正常工作。但是，如果我输入了无效的电子邮件，后来又将其更改为有效的电子邮件，则错误仍然显示

下面是组件中的代码

<mat-form-field appearance="outline" >
   <input matInput type="email" placeholder="name@desoz.com" formControlName="userEmail">
   <mat-error *ngIf="createUserForm.controls.userEmail.errors.pattern" >
      User email domain should be @desoz.com
   </mat-error>
</mat-form-field>

组件代码

ngOnInit(){

this.createUserForm = this._formBuilder.group({
      userEmail: ['', [
        Validators.required,
        Validators.email,
        Validators.pattern(/[a-zA-Z0-9_.+-,;]+@(?:(?:[a-zA-Z0-9-]+\.,;)?[a-zA-Z]+\.,;)?(desoz)\.com/)
        ]
      ]
   })
}

当我提供有效的电子邮件地址时，控制台中会出现错误

错误TypeError：无法读取null的属性“模式”

请让我知道我该如何解决

Answer 1

您的问题源自：

<mat-error *ngIf="createUserForm.controls.userEmail.errors.pattern" >

如果根据所有验证者电子邮件实际上是有效的，则不存在诸如errors之类的属性，因此会引发错误。然后，这也弄乱了您的验证。

为了避免此类问题，我建议您改用hasError。您也可以在上述代码上使用安全导航操作符，例如errors?.pattern，但我更喜欢hasError：

<mat-error *ngIf="createUserForm.hasError('pattern', 'userEmail')">

然后您的代码似乎可以正常工作：

STACKBLITZ

验证默认电子邮件域电子邮件地址时出现问题

1 个答案: