使用 errorStateMatcher 作为指令答案

【问题标题】：Use errorStateMatcher as directive使用 errorStateMatcher 作为指令
【发布时间】：2019-09-05 04:06:13
【问题描述】：

我有简单的材质输入，对于该输入，我使用材质 errorStateMatcher，它可以帮助我动态显示 mat-error 而不是在输入模糊上显示。

<input matInput
       [errorStateMatcher]="matcher"/>

在组件内部：

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}


matcher = new MyErrorStateMatcher();

是否可以将errorStateMatcher 作为指令errorStateMatcherDirective 并且不在每个控制器中使用 MyErrorStateMatcher 类，而是像这样使用它：

<input matInput
       errorStateMatcherDirective/>

【问题讨论】：

标签： angular typescript angular2-directives

【解决方案1】：

一种解决方案，可让您控制要将哪个MatInput 和哪个ErrorStateMatcher 传递给ErrorStateMatcherDirective：

@Directive({
  selector: '[errorStateMatcherDirective]'
})
export class ErrorStateMatcherDirective {
  @Input() input: MatInput;
  @Input() matcher: ErrorStateMatcher;

  constructor() {
    this.input._defaultErrorStateMatcher = this.matcher;
  }
}

<input matInput errorStateMatcherDirective #matInput="matInput" [input]="matInput" [matcher]="matcher"/>

【讨论】：