Angular 反應式 Forms 在 formArray 中嵌套 formGroups

Question

我正在構建一個具有以下結構的表單：

{
  "name": "root_test_name",
  "definition": {
    "name": "definition_test_name",
    "components": [
      {
        "name": "component_0_name",
        "info": {
          "name": "info_component_0_name"
        }
      },
      {
        "name": "component_1_name",
        "info": {
          "name": "info_component_1_name"
        }
      },
      {
        "name": "component_2_name",
        "info": { <--Error on all attempts to set the formGroup name for this one :(
          "name": "info_component_2_name" 
        }
      }
    ]
  }
}

使用反應式 forms，我能夠顯示所有項目的控件，除了“信息”formGroup 中的“名稱”。 Stackblitz 演示在這里

這是我的 AppComponent：

import { Component, VERSION } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  constructor(private fb: FormBuilder) {
    this.addComponent('component_0_name');
    this.addComponent('component_1_name');
    this.addComponent('component_2_name');
  }

  componentForm = this.fb.group({
    name: ['root_test_name', Validators.required],
    definition: this.fb.group({
      name: ['definition_test_name'],
      components: this.fb.array([]),
    }),
  });

  components(): FormArray {
    return this.componentForm.get('definition').get('components') as FormArray;
  }

  componentInfo(componentIndex: number): FormGroup {
    return this.components().at(componentIndex) as FormGroup;
  }

  addComponent(name: string) {
    let component = this.fb.group({
      name: [name],
      info: this.fb.group({
        name: ['info_' + name],
      }),
    });

    this.components().push(component);
  }
}

這是模板：

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>

<div [formGroup]="componentForm">
  <input type="text" formControlName="name" />

  <div style="padding-left:10px" formGroupName="definition">
    <input type="text" formControlName="name" />

    <div>Components</div>
    <div formArrayName="components">
      <div *ngFor=" let component of components().controls; let componentIndex = index " >
        <div style="padding-left:10px [formGroupName]="componentIndex">
          <input type="text" formControlName="name" />

          <!-- 1st attempt to get to get name out of info formGroup 
          ERROR: Property 'info' does not exist on type 'AppComponent'-->
          <!-- <div [formGroupName]="info">
            <input type="text" formControlName="name" />
          </div> -->

          <!-- 2nd attempt
          ERROR: Type 'FormGroup' is not assignable to type 'string | number'-->
          <!-- <div style="padding-left:15px" [formGroupName]="componentInfo(componentIndex)" >
            <input type="text" formControlName="name" />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</div>

<pre>{{ componentForm.value | json }}</pre>

如何為“信息”組件設置 formGroup 名稱，以便“名稱”控件顯示值。

Answer 1

使用formGroupName而不是[formGroupName] 。

<div formGroupName="info">
    <input type="text" formControlName="name" />
</div>

StackBlitz 上的示例演示

---

參考

Angular - 注冊一個嵌套的 FormGroup。