Angular中FormGroup添加报错排查及表单创建方式命名咨询

第二种方式的问题根源及修正 #

你遇到的TypeError: this.form is undefined是核心问题，原因很直接：调用addControl方法前，你没有先初始化this.form为一个合法的FormGroup实例。

第一种方式里，你通过this.formBuilder.group()直接创建了FormGroup并赋值给this.form，但第二种方式跳过了初始化步骤，直接对未定义的this.form执行操作，自然会报错。而formGroup expects a FormGroup instance的错误，是因为模板渲染时this.form还不存在，添加*ngIf="form"能避免模板提前渲染，但解决不了this.form未初始化的根本问题。

修正后的第二种方式代码如下：

// 先初始化form为一个空FormGroup实例
this.form = new FormGroup({}, { emitEvent: false });

// 再依次添加控件
this.form.addControl('location', new FormControl('', [Validators.required]), { emitEvent: false });
this.form.addControl('weather', new FormGroup([]), { emitEvent: false });
(<FormGroup>this.form.controls['weather']).addControl('rainy',
  this.formBuilder.control('', [Validators.required]), { emitEvent: false }
);
(<FormGroup>this.form.controls['weather']).addControl('sunny',
   this.formBuilder.control('', [Validators.required]), { emitEvent: false }
);

两种表单创建方式的官方称呼 #

• 第一种方式是静态表单定义：在组件初始化阶段就一次性声明完整的表单结构，控件的数量、层级、验证规则都是预先确定的，适合结构固定的表单场景。
• 第二种方式是动态表单构建：通过addControl/removeControl等API在运行时动态调整表单结构，适合需要根据用户操作或业务逻辑动态增减字段的场景。

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