获取 FormArray 中 FormGroup 的 formcontrolname

Question

我有一个 FormGroup，一个 FormArray 有 3 个 FormControls。我想遍历 FormArray 并在表单中显示每个值。但我对要在 FormControlName.

上放什么感到困惑

这是我的 FormGroup:

fg: FormGroup = new FormGroup({
    properties: new FormArray([])
  });

这就是我将 FormControls 添加到我的 FormArray 中的方式，dataArray 是我从回复中获得的数据：

let formArray = this.fg.get('properties') as FormArray;
    for(let property of dataArray){
      const userPropertyGroup = new FormGroup({
        user_id: new FormControl("", Validators.required),
        name: new FormControl("", Validators.required),
        value: new FormControl("", Validators.required),
      });

      formArray.push(userPropertyGroup);

设置FormArray中的值：

 for(let i = 0; i < dataArray.length; i++ ){
      formArray.controls[i].setValue({
          user_id: dataArray[i].user_id,
          name: dataArray[i].name,
          value: dataArray[i].value,
        })
    }

现在我想迭代并显示表单中的所有值。使用 {{property.value.name}}，我能够获取数组中每个属性的值，但我被困在 formControlName 处。那里应该放什么？

 <form [formGroup]="fg" >
    <table *ngFor="let property of fg.get('properties')['controls']" class="full-width">
        {{property.value.name}}
      <tr>
        <td>
          <mat-form-field class="full-width">
            <input matInput formControlName="?????" placeholder="User id">
          </mat-form-field>
        </td>

我在 Whosebug 上检查了很多类似的问题，但其中 none 有帮助。我也尝试实现这个 example from Angular docs。非常感谢任何帮助！谢谢。

Answer 1

您需要按如下方式构建 html：

<form [formGroup]="fg">
  <ng-container formArrayName="properties">
    <div *ngFor="let property of properties.controls; let i = index"> <!-- Iterate over FormArray controls -->
      <ng-container [formGroupName]="i"> <!-- Since each control within FormArray is a FormGroup -->
          <input formControlName="user_id" type="text" />
          <input formControlName="name" type="text" />
          <input formControlName="value" type="text" />
      </ng-container>
    </div>
  </ng-container>
</form>

在您的 ts 组件文件中定义一个 getter 以获取属性 FormArray:

get properties(): FormArray {
  return this.fg.get('properties') as FormArray;
}

PS: 我没有在 HTML 中指定任何 CSS 类或 Angular Material 组件, 保持结构简单，以便于理解层次结构。我也用过 ng-container，你可以根据你的用例使用元素。

获取 FormArray 中 FormGroup 的 formcontrolname

Get formcontrolname of FormGroup in an FormArray

angularjs

typescript

angular

formarray