TypeScript中setValue方法配合mat-select表单使用不生效问题排查

开发者阿泽

2026-10-2

问题原因

你遇到的是Angular响应式表单的控件状态校验问题：

通过setValue给表单控件赋值时，默认只会更新控件的value属性，不会修改控件的pristine/dirty、untouched/touched状态，也不会主动触发值校验更新valid状态。
你的+号绑定的新增函数中，if判断条件除了校验字段值之外，一定额外加了对控件状态的校验（比如要求控件为dirty、valid状态），所以哪怕值已经是0，状态不满足也会返回false。
截图里紫色的字段就是pristine（未经过用户手动交互）状态的样式，手动输入后控件变为dirty状态，样式变为白色，同时满足状态校验条件，新增功能就正常生效。

解决方法

两种方案选其一即可：

方案1：赋值时同步更新控件状态

修改selectionChange事件中的赋值逻辑，给字段赋值后同步更新状态、触发校验，示例代码如下：

// 获取对应表单控件
const tatControl = this.form.get('tat');
const enterDistanceControl = this.form.get('enterDistance');

// 赋值
tatControl.setValue(0);
enterDistanceControl.setValue(0);

// 标记为已交互状态
tatControl.markAsDirty();
tatControl.markAsTouched();
enterDistanceControl.markAsDirty();
enterDistanceControl.markAsTouched();

// 主动触发校验更新valid状态
tatControl.updateValueAndValidity();
enterDistanceControl.updateValueAndValidity();