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

我正在尝试创建一个仅接受默认域的电子邮件表单字段

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

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

下面是来自组件的代码

<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>

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

错误类型错误：无法读取null的属性“pattern”

请告诉我如何解决此问题

您的问题源于：

如果根据所有验证器，电子邮件实际上是有效的，则不存在类似

errors

这样的属性，因此会抛出一个错误。这也会影响您的验证

我建议您开始使用，以避免此类问题。您也可以对上述代码使用安全导航操作符，如

errors？.pattern

，但我更喜欢

hasrerror

：

那么您的代码似乎工作正常：

您的问题源于：

如果根据所有验证器，电子邮件实际上是有效的，则不存在类似

errors

这样的属性，因此会抛出一个错误。这也会影响您的验证

我建议您开始使用，以避免此类问题。您也可以对上述代码使用安全导航操作符，如

errors？.pattern

，但我更喜欢

hasrerror

：

那么您的代码似乎工作正常：

---

如果我设置了默认的电子邮件域，则此功能可以正常工作。我试图将来自API的动态数据设置为模式的默认值。设置类似字符串的表达式时出错。例如：“[a-zA-Z0-9.+-，；]+@（？：（？：[a-zA-Z0-9-]+\，；）？[a-zA-Z]+\，；）（“+this.clientDomain+”）\。+this.postDomain+”）好吧，你的问题没有说什么，所以我的答案适用于你的问题。请把我的stackblitz与这个新的问题分开，我很高兴看到我是否可以进一步帮助。如果我设置一个默认的电子邮件域，这个工作很好。我试图将来自API的动态数据设置为模式的默认值。设置类似字符串的表达式时出错。例如：“[a-zA-Z0-9.+-，；]+@（？：（？：[a-zA-Z0-9-]+\，；）？[a-zA-Z]+\，；）（“+this.clientDomain+”）\。+this.postDomain+”）好吧，你的问题没有说什么，所以我的答案适用于你的问题。请把这期新的杂志交给我的stackblitz，我很高兴看到我是否能进一步提供帮助。

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/)
        ]
      ]
   })
}