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

Question

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

Answer 1

您可以从示例中的 FocusMonitor 中查看，它可以是这样的：

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

思路是material提供errorState，从组件的类型就可以看出来，所以只要你改变它，它就会反映到组件上，希望对你有帮助！

Answer 2

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

创建了一个基础 class

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

我不得不从 Material 存储库中复制一些类型，例如 CanUpdateErrorStateCtor。

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

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

Answer 3

解决方法正确！重用 material 核心的 mixinErrorState 是处理它的最佳方式。我最近发布了一个关于自定义表单域的详细视频，其中还详细解释了自定义表单域中的错误处理。对于其他通过观看视频更好地理解的人来说可能会很有趣 https://youtu.be/AZsw2nRxkBk?t=825

Answer 4

如果您按照 the official guide 创建自定义 material 表单域，并且您在构造函数中声明了 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;
  }

进行验证。

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

Angular6 Material custom form field control with validation errors (mat-error)

forms

angular

angular6

angular-material-6