带有验证错误的 Angular6 Material 自定义表单字段控件（mat-error）

Question

如何制作 Material 自定义表单字段控件（如这个）以支持表单验证并使用 mat-error 显示它们？我知道常规 matInput 指令使用 ErrorStateMatcher ( doc )，但我不明白如何将其与自定义表单字段链接。

Answer 1

通过查看 Material2 ( https://github.com/angular/components/blob/master/src/material/select/select.ts )中的一些现有组件，我找到了一个解决方案。我按照这个例子创建了一个基类

export const _MatSelectMixinBase:
CanDisableCtor &
HasTabIndexCtor &
CanDisableRippleCtor &
CanUpdateErrorStateCtor &
typeof MatSelectBase =
    mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));

我不得不从 Material repo 中复制一些类型，比如 CanUpdateErrorStateCtor。

然后更新我的构造函数以注入 ErrorStateMatcher，最后在 ngDoCheck 中执行以下操作：

ngDoCheck() {
   if (this.ngControl) {
      this.updateErrorState();
   }
}