mat-form-field结合FormArray与formGroupName时显示异常求助

问题核心是新增的控件类型不匹配：初始的details FormArray中存储的是包含label和description的FormGroup，但点击添加按钮时，你推入的是单个FormControl('')，导致formGroupName="i"无法正确绑定到合法的FormGroup，进而让mat-form-field无法识别控件状态，默认样式不生效。

修改后的TS代码 #

formMain = this.fb.group({
    details: this.fb.array([
      new FormGroup({
        label: new FormControl(''),
        description: new FormControl(''),
      }),
    ]),
  });

  get detailsFormArray() {
    return this.formMain.controls.details as FormArray;
  }

  addDetails() {
    // 替换为与初始结构一致的FormGroup
    this.detailsFormArray.push(
      this.fb.group({
        label: new FormControl(''),
        description: new FormControl(''),
      })
    );
  }

修改说明 #

将addDetails方法中推入的this.fb.control('')替换为和初始元素结构完全一致的FormGroup，确保每个数组元素都是包含label和description的表单组。这样formGroupName="i"能正确关联到对应的FormGroup，mat-form-field就能正常渲染默认的填充样式，无需点击输入框即可显示预期效果。

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