启用正确绑定 Angular formArray 数据答案

【问题标题】：Enable to bind Angular formArray data properly启用正确绑定 Angular formArray 数据
【发布时间】：2020-01-21 12:03:33
【问题描述】：

我想在FormGroup 中创建formArray。 formArray 有多个 formGroup 和 FormGroup 已创建，但如果我在输入标签中写入 0 索引但数据反映在最后一个 FormGroup 上，我可以在 html 中绑定数据。

HTML：

<form [formGroup]="form">
  <table>
  <thead>
    <tr>
      <th>City</th>
      <th>Employee id</th>
    </tr>
  </thead>
  <tbody formArrayName="myNewArray">
    <tr *ngFor="let controls of form.get('myNewArray').controls; let i = index">
      <div [formGroupName]="i">
        <td>
         <mat-form-field>
          <input matInput class="size-input" formControlName="first">
        </mat-form-field>
      </td>
      <td>
         <mat-form-field>
          <input matInput class="size-input" formControlName="second">
        </mat-form-field>
      </td>
      </div>
    </tr>
  </tbody>
  <pre>{{form.value | json}}</pre> 
</table>
</form>

TS：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
    myNewArray: this.fb.array([])
  });

  }
  ngOnInit(): void {
    const formGroup = { };
    let abc = ['first', 'second'];
    abc.forEach(formControl => {
      formGroup[formControl] = new FormControl("", Validators.required);
    });

    for (let value in abc) {
      let formGroupArray = <FormArray>this.form.controls.myNewArray;
      formGroupArray.push(this.setUsersFormArray(formGroup));
    }
  }
  private setUsersFormArray (formGroup) {
    return this.fb.group(formGroup)
  }

}

同时查看链接：- https://stackblitz.com/edit/angular-ptbvgd?file=src/app/app.component.html

【问题讨论】：

标签： angular angular-reactive-forms formarray

【解决方案1】：

我对 ts 做了一些改动。希望对您有所帮助：

    @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
    myNewArray: this.fb.array([])
  });

  }
  ngOnInit(): void {
    const formGroup = { };
    let abc = ['bonus', 'contributionretirement'];
    abc.forEach(formControl => {
      formGroup[formControl] = new FormControl("", Validators.required);
    });
    console.log(formGroup);

    for (let value in abc) {
      let formGroupArray = this.myNewArray;
      formGroupArray.push(this.setUsersFormArray());
    }
    console.log(this.form.controls.myNewArray);
    for (let controls of this.myNewArray.controls) {
      console.log(controls,'tttt');
    }
  }

  get myNewArray(): FormArray{
    return this.form.get('myNewArray') as FormArray;
  }
  private setUsersFormArray ():FormGroup {
    const formGroup = new FormGroup({});
    let abc = ['bonus', 'contributionretirement'];
    abc.forEach(formControl => {
      formGroup.addControl(formControl, new FormControl("", Validators.required));
    });
    return formGroup;
  }

}

【讨论】：