Angular响应式表单报错formGroup expects a FormGroup instance求解决方案

这个错误的核心原因是：模板渲染时，sampleInfoFormGroup还未被初始化（异步请求还没返回数据，createSampleInfoForm()还没执行），此时模板里的[formGroup]="sampleInfoFormGroup"绑定的是undefined，不符合Angular对FormGroup的要求。

解决方案一：提前初始化空FormGroup #

在组件类中先给sampleInfoFormGroup赋值一个空的FormGroup实例，避免模板渲染时出现undefined：

// 组件类中定义时直接初始化
sampleInfoFormGroup: FormGroup = this.formBuilder.group({});

createSampleInfoForm() {
  console.log(this.sampleTable)
  this.sampleInfoFormGroup = this.formBuilder.group({
    workOrderName: [this.sampleTable.workOrderName],
    fabric: [""],
    customer: [""],
    workOrderModelName: [this.sampleTable.workOrderModelName],
    rollName: [this.sampleTable.rollName],
    testFabricList: [this.sampleTable.testFabricList],
    workShopName: [this.sampleTable.workShopName],
    testFabricSample: [this.sampleTable.testFabricSample],
    kID: [this.sampleTable.KID],
    sewingReason: [this.sampleTable.sewingReason],
    moldName: [this.sampleTable.moldName],
    explanation: [this.sampleTable.explanation],
    washingArrivalDate: [this.sampleTable.washingArrivalDate],
    washingDepartureDate: [this.sampleTable.washingDepartureDate],
  });
}

解决方案二：用*ngIf延迟表单渲染 #

在模板的form标签上添加*ngIf="sampleInfoFormGroup"，确保只有表单实例存在时才渲染表单：

<form [formGroup]="sampleInfoFormGroup" *ngIf="sampleInfoFormGroup">
  <!-- 表单内容保持不变 -->
</form>

额外优化：用patchValue填充数据（可选） #

如果不想重新创建FormGroup，也可以先初始化空表单，等数据返回后用patchValue填充：

// 初始化空表单
ngOnInit() {
  this.sampleInfoFormGroup = this.formBuilder.group({
    workOrderName: [""],
    fabric: [""],
    customer: [""],
    workOrderModelName: [""],
    rollName: [""],
    testFabricList: [""],
    workShopName: [""],
    testFabricSample: [""],
    kID: [""],
    sewingReason: [""],
    moldName: [""],
    explanation: [""],
    washingArrivalDate: [""],
    washingDepartureDate: [""],
  });
}

getSampleTableById(id: number) {
  this.sampleTableService.getSampleTableById(id).subscribe(data => {
    if (data) {
      this.sampleTable = data;
      // 用patchValue填充数据
      this.sampleInfoFormGroup.patchValue(this.sampleTable);
    }
  })
}

这样既避免了控制台报错，也能正常填充数据。

内容的提问来源于stack exchange，提问作者Eren Akgöz