Angular15模板驱动表单：自定义验证失败时如何设为无效？

1. 元素未通过验证但表单仍有效的原因 #

Angular表单的有效性状态完全基于注册到FormControl/FormGroup的验证器判定。你遇到的问题大概率是以下两种情况之一：

• 自定义验证逻辑仅在模板中做了错误提示，但未将验证器函数注册到对应表单控件上，Angular没把这个规则纳入表单有效性的判断逻辑。
• 验证器函数返回格式不符合要求：Angular要求验证失败时返回包含错误键值对的对象（如{ invalidDepartment: true }），验证通过时返回null。如果你的验证器没正确返回这个结构，或是手动修改表单状态的方式错误（比如直接修改control.status），Angular不会识别该错误，表单依然会判定为有效。

2. 最可靠的修复方案 #

推荐使用响应式表单实现验证（比模板驱动更可控），具体步骤如下：

步骤1：编写符合规范的自定义验证器 #

在组件类中定义验证器函数，确保返回格式正确：

import { ValidationErrors, FormControl } from '@angular/forms';

validateDepartment(control: FormControl): ValidationErrors | null {
  // 根据你的默认值调整判断条件，比如默认值是空字符串或null
  if (!control.value || control.value === '') {
    return { invalidDepartment: true }; // 验证失败返回错误对象
  }
  return null; // 验证通过返回null
}

步骤2：将验证器注册到表单控件 #

初始化FormGroup/FormControl时，把验证器加入validators数组：

import { FormBuilder, FormGroup } from '@angular/forms';

// 组件类内
employeeForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.employeeForm = this.fb.group({
    // 其他表单控件...
    department: ['', [this.validateDepartment.bind(this)]]
    // 若需同时结合必填验证，可添加Validators.required：
    // department: ['', [Validators.required, this.validateDepartment.bind(this)]]
  });
}

注：如果验证逻辑不需要组件上下文，可省略bind(this)；若需调用组件内变量或方法，则必须绑定this。

步骤3：模板中基于控件错误状态显示提示 #

确保错误提示关联到表单控件的errors属性，而非自定义判断：

<select formControlName="department" class="form-control">
  <option value="">请选择部门</option>
  <option value="IT">IT部</option>
  <option value="HR">人事部</option>
  <!-- 其他部门选项 -->
</select>
<!-- 错误提示 -->
<div *ngIf="employeeForm.get('department')?.hasError('invalidDepartment') && employeeForm.get('department')?.touched" class="text-danger">
  请选择部门
</div>

关键注意事项 #

• 不要手动修改表单控件的status或valid属性，Angular会自动根据验证器返回值更新这些状态。
• 若使用模板驱动表单，需将验证器封装成指令并注册到模块中，但响应式表单更直观易维护，优先推荐。

内容的提问来源于stack exchange，提问作者Razvan Zamfir