Angular表单使用对象作为formState时addControl失效问题

这不是Angular框架Bug，触发的是Angular表单的两个内置规则，调整写法和调用逻辑即可解决：

核心原因说明 #

• Angular识别FormControl第一个参数是formState配置还是原始值的规则为：只有传入的对象同时显式包含value和disabled两个属性时，才会被解析为配置对象，否则整个对象会直接作为控件的value存储。
• 如果在模板初始渲染、变更检测完成后调用addControl新增表单控件，且模板已声明对应formControlName指令，会触发变更检测冲突，导致控件初始化中断，看起来就像没有被添加到表单中。

具体场景解决方案 #

1. 仅需要设置初始值、不需要设置禁用状态的场景，直接传原始值作为第一个参数即可：

this.contactForm.addControl('email', new FormControl('', Validators.required));

2. 需要通过配置对象声明的场景，必须同时携带disabled属性，哪怕值为false：

// 会被正确识别为formState配置，控件实际值为''
this.contactForm.addControl('email', new FormControl({ value: '', disabled: false }, Validators.required));

3. 必须在渲染完成后新增控件的场景，添加完成后手动触发一次变更检测即可解决控件添加失败的问题：

// 组件构造器中先注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef, private fb: FormBuilder) {}

// 新增控件后调用变更检测
this.contactForm.addControl('email', this.fb.control({ value: '', disabled: false }, Validators.required));
this.cdr.detectChanges();

内容的提问来源于stack exchange，提问作者Javi Marzán