Question

如何制作Material自定义表单字段控件（like this one）以支持表单验证并显示错误？我知道常规的matInput指令使用ErrorStateMatcher（doc），但是我不知道如何将其与自定义表单字段链接。

Answer 1

通过查看Material2（https://github.com/angular/material2/blob/master/src/lib/select/select.ts）中的一些现有组件，我找到了解决方案。我根据此示例创建了一个基类

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

我不得不从材料仓库中复制一些类型，例如CanUpdateErrorStateCtor。

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

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

Answer 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;
  }

使验证工作。

Answer 3

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

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

这个想法是重要的errorState，您可以从组件的类型中看到它，因此，每当更改它时，它将反映在组件上，希望对您有所帮助！

Answer 4

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

可以更好地理解的人来说，可能会很有趣

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

4 个答案: