使用 errorStateMatcher 作为指令

Question

我有简单的 material 输入，对于该输入，我使用 material 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 class 而是像这样使用它：

<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 作为指令

Use errorStateMatcher as directive

angular

typescript

angular2-directives