Angular FormArray-无法读取null的属性“ push”

如何解决Angular FormArray-无法读取null的属性“ push”

我正在与Angular Reactive FormArray一起在添加按钮上添加多个输入。

我的设置中有多个formGroup。尝试添加/推送输入时，出现“无法读取null的属性'push'”错误。

formGroup设置是否有问题，或者是由于formArray中有多个FormGroups

我的代码：HTML

<form [formGroup]="form">
    <input type="checkBox" formControlName="published"> Published
    <div *ngIf="form.controls.published.value">

    <h2>Credentials</h2>
    <button (click)="addCreds()">Add</button>

    <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
        <ng-container [formGroupName]="i">
        <input placeholder="Username" formControlName="username">
        <input placeholder="Password" formControlName="password">
        </ng-container>
    </div>

    </div>
</form>

角度代码：

form: FormGroup;

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,formArray: this.fb.array([
        this.fb.group({
          credentials: this.fb.array([]),})
      ])
    });
}

addCreds() {
    const creds = this.form.get('credentials') as FormArray;
    creds.push(this.fb.group({
      username: '',password: '',}));
}

我也有https://stackblitz.com/edit/angular-form-array-example-hfmrm2

解决方法

由于嵌套了formArray，因此必须按如下所示更改模板。

component.html

 <ng-container
      formArrayName="formArray"
      *ngFor="let forArr of form.get('formArray').controls; let x = index"
    >
      <ng-container [formGroupName]="x">
        <div
          formArrayName="credentials"
          *ngFor="
            let creds of forArr.controls.credentials?.controls;
            let i = index
          "
        >
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username" />
            <input placeholder="Password" formControlName="password" />
          </ng-container>
        </div>
      </ng-container>
    </ng-container>

component.ts

 addCreds() {
    const formArray = this.form.get("formArray") as FormArray;
    (formArray.controls[0].get("credentials") as FormArray).push(
      this.fb.group({
        username: "",password: ""
      })
    );
  }

Forked Example