4

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

4

4 回答 4

5

通过查看 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();
   }
}
于 2018-10-17T19:24:39.040 回答
1

如果您按照官方指南创建自定义材料表单字段，并且您已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;
  }

让验证工作。

于 2021-03-24T06:02:10.827 回答
0

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

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

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

于 2018-10-16T14:21:52.160 回答
0

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

于 2020-08-04T08:26:07.057 回答