Angular升级至13后向FormGroup添加FormControl被标记为Valid异常问题

问题复现 #

升级Angular 13后，通过addControl向已有FormGroup动态添加FormControl时，即使控件配置了required校验器、当前值不满足校验要求，控件和父表单仍会被标记为Valid状态，移除动态添加逻辑后校验功能恢复正常。
核心复现代码：

const selectedRegionControl = new FormControl(value);
(this.form.get('info') as FormGroup).addControl("selectedRegion", selectedRegionControl);

根因说明 #

这是Angular 13表单模块的破坏性变更导致的，旧版本中addControl执行后会自动递归触发当前控件及所有父层级的校验重算，同时支持隐式继承父FormGroup预设的对应控件校验规则；13版本为了提升大表单的渲染性能，默认关闭了这两个自动逻辑，没有显式处理的话就会出现状态不更新的问题。

排查路径 #

• 检查动态创建的FormControl是否在构造函数中显式传入了required等校验器，不要依赖父FormGroup预设的校验规则，13版本不再做隐式继承。
• 检查addControl执行后是否手动触发了校验状态更新，默认逻辑不会自动重算状态。
• 检查FormControl初始化传入的value值：如果传入的是空数组、空对象这类引用类型空值，required校验器会判定为有效值，只有null、undefined、空字符串会被判定为空值。

修复方法 #

• 单场景修复：实例化控件时显式绑定校验器，添加完成后手动触发全链路状态更新

import { Validators } from '@angular/forms';
// 1. 显式传入校验器，不要依赖父组配置
const selectedRegionControl = new FormControl(value, Validators.required);
const infoGroup = this.form.get('info') as FormGroup;
// 2. 添加控件
infoGroup.addControl("selectedRegion", selectedRegionControl);
// 3. 先更新控件自身校验状态
selectedRegionControl.updateValueAndValidity({ emitEvent: false });
// 4. 向上更新所有父表单组的校验状态
infoGroup.updateValueAndValidity({ onlySelf: false, emitEvent: false });

• 全局兼容修复：如果项目中存在大量动态添加控件的逻辑，不需要逐处修改，可以在应用启动阶段给FormGroup.addControl打补丁，恢复旧版本的自动更新逻辑

// main.ts 中，在platformBrowserDynamic().bootstrapModule(AppModule) 之前添加以下代码
import { FormGroup, AbstractControl } from '@angular/forms';

const originalAddControl = FormGroup.prototype.addControl;
FormGroup.prototype.addControl = function(
  name: string,
  control: AbstractControl,
  options?: { emitEvent?: boolean }
) {
  originalAddControl.call(this, name, control, options);
  const emitEvent = options?.emitEvent ?? false;
  control.updateValueAndValidity({ emitEvent });
  this.updateValueAndValidity({ onlySelf: false, emitEvent });
  return this;
};

注意事项 #

如果动态添加控件后有手动赋值（setValue/patchValue）操作，赋值完成后也需要调用对应控件的updateValueAndValidity方法触发重算，避免状态不更新。

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