Angular6材料自定义表单字段控件，具有验证错误（mat-error）

Question

如何制作一个材料自定义表单字段控件（像这样的）来支持表单验证，并用mat-error显示它们？我知道常规的matInput指令使用错误StateMatcher（doc），但我不明白如何将其与自定义表单字段链接。

Answer 1

您可以从示例中的焦点监视器中检查，它可以是这样的：

  fm.monitor(elRef.nativeElement, true).subscribe(origin => {
    if (this.parts.status === 'INVALID') {
      this.errorState = true;
    }
    this.focused = !!origin;
    this.stateChanges.next();
  });

这个想法是物质提供errorState，你可以从组件的类型中看到，所以每当你改变它，它就会反映在组件上，希望它的帮助！

Answer 2

如果您按照官方指南创建自定义材料表单字段，并且在构造函数中声明了ngControl：

  constructor(
    ...,
    @Optional() @Self() public ngControl: NgControl) {
    ...

    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }

你所需要的是：

  get errorState(): boolean {
    return this.ngControl.invalid && this.ngControl.dirty;
  }

让验证工作开始。

Answer 3

通过查看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))));

我必须从材料回购中复制一些类型，如CanUpdateErrorStateCtor。

然后更新我的构造函数来注入一个错误StateMatcher，最后在ngDocheck中，这样做：

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