Angular动态创建响应式表单触发formGroup expects a FormGroup instance报错如何解决

• Angular渲染子组件模板的时机早于ngAfterViewChecked生命周期钩子执行时机，你在子组件中声明的fieldForm没有初始赋值，默认是undefined，模板解析到[formGroup]="fieldForm"时还没拿到有效FormGroup实例，直接抛出对应错误。
• 你将表单创建逻辑放在ngAfterViewChecked中本身存在设计问题：该钩子在每一次变更检测周期视图更新后都会触发，会导致FormGroup被重复创建，不仅浪费性能，还会丢失已填写的表单状态。
• 你使用<ng-template *ngIf="info.length>0">包裹内容时不报错但无内容，是因为ng-template是Angular的虚拟模板容器，默认不会渲染到DOM中，直接在ng-template上使用*ngIf会生成嵌套的template结构，内层的表单内容永远不会被渲染。

1. 调整表单创建逻辑的触发时机，将ngAfterViewChecked中的逻辑迁移到ngOnChanges中，仅在info输入属性发生变更且有有效值时才创建表单，避免重复实例化。
2. 要么给fieldForm设置初始空FormGroup实例，要么在模板的form标签外层添加判断，仅当fieldForm存在时才渲染表单。
3. 如果需要延迟渲染表单内容，不要直接在ng-template上用*ngIf，替换为不生成额外DOM节点的ng-container即可。
4. 模板中的formControlName建议使用属性绑定写法[formControlName]="field.label"，替换插值写法避免出现意外解析问题。

修改后的子组件TS示例代码 #

@Input() info: Info[];
// 初始化空FormGroup避免模板读取时为undefined
fieldForm: FormGroup = new FormGroup({});

ngOnChanges(changes: SimpleChanges): void {
  // 仅当info发生变更且有值时创建表单
  if (changes['info'] && this.info?.length > 0) {
    this.createFieldForm();
  }
}

private createFieldForm() {
  const group = {};
  this.info.forEach(field => {
    group[field.label] = new FormControl('');
  });
  this.fieldForm = new FormGroup(group);
}

修改后的子组件模板示例代码 #

<!-- 用ng-container做判断不生成额外DOM -->
<ng-container *ngIf="fieldForm">
  <form [formGroup]="fieldForm">
    <div *ngFor="let field of info">
      <div [ngSwitch]="field.type">
        <div *ngSwitchCase="'textBox'">
          <input type="text" [formControlName]="field.label"/>
        </div>
        <div *ngSwitchCase="'number'">
          <input type="number" [formControlName]="field.label"/>
        </div>
      </div>
    </div>
  </form>
</ng-container>

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