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

【问题标题】：Angular6 Material custom form field control with validation errors (mat-error)带有验证错误的Angular6 Material自定义表单字段控件（mat-error）
【发布时间】：2018-09-26 17:48:36
【问题描述】：

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

【问题讨论】：

我也遇到过同样的问题（尚未解决）。我还创建了一张票，希望有人可以更新文档。 github.com/angular/material2/issues/13624

标签： angular forms angular6 angular-material-6

【解决方案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 存储库中复制一些类型，例如 CanUpdateErrorStateCtor。

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

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

【讨论】：

花了一整天解决这个问题！感激不尽！
@Rémi，该链接指向 404 页面。我也无法从任何地方导入MatSelectBase。也许现在是私人课程？
@TsvetanGanev 看起来新链接是这个github.com/angular/components/blob/master/src/material/select/…。
MatSelectBase 是您必须复制的私有类。在 select.ts 文件中搜索 _MatSelectMixinBase。
谢谢。最后，我只是将 Google 的代码复制粘贴到我自己的组件中。肮脏的解决方案，但这是我找到的唯一一个。

【解决方案2】：

如果您关注the official guide创建自定义材料表单字段，并且你已经在构造函数中声明了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;
  }

让验证工作。

【讨论】：

【解决方案3】：

您可以从示例中的FocusMonitor 进行检查，可以是这样的：

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

想法是素材提供errorState，你可以从组件的类型上看出来，所以每当你改变它时，它都会反映在组件上，希望对你有帮助！

【讨论】：

【解决方案4】：

解决方案是正确的！从材料核心重用 mixinErrorState 是最好的处理方式。我最近发布了一个关于自定义表单字段的详细视频，其中还详细解释了自定义表单字段中的错误处理。观看视频https://youtu.be/AZsw2nRxkBk?t=825

的其他人可能会更了解

【讨论】：