Question

我有简单的材质输入，对于该输入，我正在使用材质errorStateMatcher，它可以帮助我动态地显示出垫层误差，而不是在输入模糊时显示。

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

Answer 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"/>

使用errorStateMatcher作为指令

1 个答案: