Angular响应式表单：如何让禁用控件参与验证？

方法1：用readonly替代disabled（推荐） #

Angular的disabled控件会被自动排除在验证逻辑外，但readonly控件仅限制用户编辑，仍会正常参与表单验证，完全匹配你的需求场景。

实现步骤 #

• TS代码：初始化表单时不设置禁用，用变量控制只读状态

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

assetForm: FormGroup;
isAssetNameReadOnly = true; // 控制输入框只读的变量

constructor(private fb: FormBuilder) {
  this.assetForm = this.fb.group({
    assetName: ['', Validators.required] // 仅配置必填验证，不设置禁用
  });
}

// 如需切换输入框可编辑状态，直接修改变量即可
toggleAssetNameEdit() {
  this.isAssetNameReadOnly = !this.isAssetNameReadOnly;
}

• HTML代码：绑定readonly属性而非disabled，按钮禁用状态绑定到控件的invalid属性

<input formControlName="assetName" [readonly]="isAssetNameReadOnly" />
<button [disabled]="assetForm.get('assetName')?.invalid">提交</button>

方法2：强制禁用控件参与验证 #

如果业务上必须保留disabled状态，可以通过以下两种方式实现验证逻辑生效：

方式2.1：手动触发验证更新 #

初始化禁用控件后，调用updateValueAndValidity并设置ignoreDisabled: false，强制让禁用控件参与验证计算：

this.assetForm = this.fb.group({
  assetName: [{ value: '', disabled: true }, Validators.required]
});

// 强制更新验证状态，包含禁用控件
this.assetForm.get('assetName')?.updateValueAndValidity({ 
  ignoreDisabled: false,
  emitEvent: true // 触发状态变更事件，确保按钮状态同步更新
});

注意：后续若控件的禁用状态或值发生变化，需要再次调用该方法同步验证结果。

方式2.2：自定义不受禁用状态影响的验证器 #

编写自定义验证器，直接检查控件值，无视其禁用状态：

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

// 自定义必填验证器
export function forceRequiredValidator(control: AbstractControl): ValidationErrors | null {
  // 不考虑控件是否禁用，直接检查值是否为空
  const trimmedValue = control.value?.trim();
  return !trimmedValue ? { required: true } : null;
}

// 组件内使用该验证器
this.assetForm = this.fb.group({
  assetName: [{ value: '', disabled: true }, forceRequiredValidator]
});

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