浅记一下: angular如何使用formArray实现动态表单(自用)

使用formArray实现动态表单

html如下

<form nz-form [nzLayout]="'inline'" [formGroup]="arrayForm">
  <div formArrayName="arr">
    <nz-form-item *ngFor="let item of arr; index as i">
      <nz-form-control [formGroupName]="i">
        <nz-input-group nzPrefixIcon="user">
          <input formControlName="userName" nz-input placeholder="Username" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
  </div>
</form>

<button nz-button (click)="add()">新增</button>
<button nz-button (click)="delete(i)">删除</button>
<button nz-button (click)="getValue()">输出</button>

ts如下

export class NzDemoFormHorizontalLoginComponent implements OnInit {
  arrayForm: FormGroup;
  arr: any[] = [];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.arrayForm = this.fb.group({
      arr: this.fb.array([]),
    });
  }

  public add(): void {

    const form = this.fb.group({
      userName: [null],
    });
    (this.arrayForm.get('arr') as FormArray).push(form);
    this.arr.push(null);
    console.log(this.arr, 111);
  }

  public delete(i: number): void {
    const arr = this.arrayForm.get('arr') as FormArray;
    arr.removeAt(i);
    this.arr = this.arr.filter((item, index) => index !== i);
  }

  public getValue(): void {
    const value = this.arrayForm.value;
    console.log(value);
  }
  
  public initValue(): void {
     // 这里可以初始化赋值 index自取 
    (this.arrayForm.get('arr') as FormArray)[index].patchValue({userName: '11111'});
  }

}