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

雷米

如何制作一个材料自定义表单字段控件(如此控件)以支持表单验证并显示错误?我知道常规的matInput指令使用ErrorStateMatcher(doc),但是我不知道如何将其与自定义表单字段链接。

雷米

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 4:反应式表单控件通过自定义异步验证器停留在待处理状态

带有参数的Angular 2自定义验证器

angular-schema-form:将自定义html添加到表单字段

Angular2如何将参数传递到自定义表单控件验证器中?

依赖于另一个表单控件的Angular 2自定义验证器

Angular 2表单状态对于ng-select控件的自定义验证始终无效

反应形式自定义验证器未在angular6中显示错误

Angular 2反应式表单自定义验证器仅在表单控件有效时适用

Angular自定义表单验证消息未显示在1个特定字段上

Angular6表单验证

使用带有条带的自定义单独的表单字段

并非所有表单错误都在自定义表单字段中呈现

角材料:创建自定义表单字段控件时,mat-form-field必须包含MatFormFieldControl

Angular自定义表单验证器使用其他控件

Flask WTForms-基于多个表单字段的自定义验证器

Angular Reactive Forms:是否可以创建包含“必须具备”验证的自定义表单控件组件?

如果使用自定义表单字段提交了“ 0”,ManyToOne JoinColumn(不可为空)不显示表单错误

自定义引导电子邮件表单字段验证

Angular 2自定义表单控件,以模板驱动方式具有多个输入

Angular2模板驱动的表单:如何为自定义表单控件创建字段验证?

Angular4 自定义在单个字段中使用多个 mat-error 验证 FormGroup 中的 formFileds 数组不显示错误消息

Angular 表单自定义验证数据

angular - 带有 http 调用的自定义验证器

Ant Design:使用自定义验证器验证表单字段

Angular Material:自定义表单字段控件 - 移动浮动标签(向下)

Angular Material 自定义表单字段控件的值未在调用 FormGroup 中更新

创建自定义验证器以针对多个表单字段进行验证

带有自定义调色板的 Angular Material 自定义主题

表单组上的 Angular 自定义跨字段验证对日期字段未按预期工作