如何解决Angular响应式表单未设校验的地址字段出现无效模式报错问题

问题根因 #

即使 FormGroup 中未给 address 字段配置校验规则，出现 pattern 报错通常来自以下三种场景：

• 场景1：模板中 address 对应的 <input> / <textarea> 标签自带原生 pattern 属性，Angular 响应式表单默认会自动关联原生 HTML 校验属性，触发 pattern 校验报错。
• 场景2：项目中配置了全局通用表单校验器，隐式给所有表单字段绑定了 pattern 校验规则。
• 场景3：代码其他位置（如生命周期回调、事件响应函数）动态调用了 setValidators() 方法，给 address 字段添加了 pattern 校验未被感知。

对应解决方法 #

1. 排查模板代码，删除 address 表单控件标签上的 pattern 属性，也可给表单根标签添加 novalidate 属性全局禁用原生 HTML 校验。
2. 若使用了全局通用校验器，可在 FormGroup 声明 address 字段时显式指定校验器为 null，覆盖全局默认规则：

this.formGroup = this.fb.group({
  id: [''],
  firstname: ['', Validators.compose([Validators.required])],
  lastname: ['', Validators.compose([Validators.required])],
  contactNo: [''],
  email: [''],
  address: ['', null], // 显式指定无校验器
})

3. 全局搜索代码中 this.formGroup.get('address')?.setValidators 相关逻辑，删除不必要的动态添加 pattern 校验的代码。

快速调试方法 #

添加如下代码打印 address 字段实际绑定的校验器，确认是否被额外绑定了规则：

console.log('address字段校验器：', this.formGroup.get('address')?.validator);

内容的提问来源于stack exchange，提问作者Manthan Machhi