Angular 只有一个条件为真时，两个mat错误都会显示

只有一个错误出现时，两个mat错误都会显示

我正在尝试使用mat错误创建自定义验证器。当电子邮件输入和确认密码的hasError（“”）值均为真时，两者均为红色

我认为我的MyErrorStateMatcher类逻辑有点错误。请帮忙！我已经尝试了我能做的一切。提前谢谢你

如图所示。当confirmPassword抛出错误时，电子邮件字段也是红色的

---

我的ErrorStateMatcher：

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const invalidCtrl = !!(control && control.invalid && (control.dirty || control.touched));
    const invalidParent = !!(control && (control.parent.hasError('notTheSame') || control.parent.hasError('emailUsed')));

    return ((invalidCtrl || invalidParent));
  }
}

HTML：（关注电子邮件和confimPassword）

---

输入电子邮件和输入确认密码时发生错误，两者都有

[errorStateMatcher]=“matcher”

电子邮件地址字段显示错误，因为错误状态匹配器检查父项（即表单），而父项由于密码字段不匹配而出错。您需要为电子邮件字段和密码字段使用不同的错误状态匹配器，因为条件不同-如果密码字段不匹配，则电子邮件不需要出错。

创建customErrorMatcher

class CrossFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private name:string){}  //<--add a constructor
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    //when we want to show the error, but we can use "name"
    return true 
    //when we want not show the error
    return false
  }
}

好的，如果我们想在

输入有效时在
中显示错误，我们使用customErrorMatcher

这是一个像

class CrossFieldErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    //when we want to show the error
    return true 
    //when we want not show the error
    return false
  }
}

通常，我们的组件中有

  errorMatcher=new CrossFieldErrorMatcher()
  //and the .html
  <mat-form-field>
    <input matInput formControlName='verifyPassword' 
        [errorStateMatcher]="errorMatcher">
    <mat-error *ngIf="....">
      Passwords do not match!
    </mat-error>
  </mat-form-field>

errorMatcher=新的CrossFieldErrorMatcher（）
//还有.html
密码不匹配！

嗯，我们正在做一些改变，在customErrorMatcher中添加一个构造函数

class CrossFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private name:string){}  //<--add a constructor
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    //when we want to show the error, but we can use "name"
    return true 
    //when we want not show the error
    return false
  }
}

类CrossFieldErrorMatcher实现ErrorStateMatcher{
构造函数（私有名称：string）{}//除了@G.Tranter answer之外，另一种方法是，您可以使用模式验证器并传递正则表达式来检查重复的电子邮件。您必须了解具有customErrorMatches的目的。请参阅此伟大的链接：
仅在
中的输入无效时显示。使用customErrorMatches，您可以说mat错误显示在另一种状态（在链接中，当窗体出现错误且控件脏时，会显示此状态（尽管控件有效！）。在代码中，如果窗体无效，则所有具有
[errorStateMatcher]=“matcher”
的输入都将无效，因此请删除
[errorStateMatcher]
在您的电子邮件中input@Eliseo删除它们可能是一个好主意，但我需要它来为电子邮件本身制作一个自定义验证程序，以检查数据库中的重复电子邮件。有没有办法将所有自定义验证程序合并到一个errorStateMatcher中？如果您的checkExistingEmail仅依赖于电子邮件，请将验证程序放入电子邮件中（不在表单中），如果取决于其他字段，您可以使用两个不同的CustomErrorMatcher您的意思是这样做吗？：
email:new FormControl（“”，[Validators.required，Validators.email，this.checkExistingEmail是否有任何方法将它们与一个errorStateMatcher组合在一起？不是“好的”我可以看到的方式。你总是可以像黑客一样在控件中添加一个“name”属性，你可以在匹配器中检查。例如，
signupForm['confirmPassword']['name']='confirmPassword'
和在匹配器
中返回（invalidCtrl | |（control['name']=='confirmPassword'&&invalidParent））
。或者（更好一点）您可以为同一matcher类创建单独的实例，并使用构造函数将name属性添加到实例中。但在我看来，一刀切的方法更难阅读/理解，更不易维护，更容易出现错误。
class CrossFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private name:string){}  //<--add a constructor
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    //when we want to show the error, but we can use "name"
    return true 
    //when we want not show the error
    return false
  }
}

  errorMatcher(name:string)
  {
    return new CrossFieldErrorMatcher(name);
  }

  //and the .html
  <mat-form-field>
    <input matInput formControlName='verifyPassword' 
        [errorStateMatcher]="errorMatcher('password')">
    <mat-error *ngIf="....">
      Passwords do not match!
    </mat-error>
  </mat-form-field>