Angular FormArray - Cannot read property 'push' of null

Question

Im working with Angular Reactive FormArray to add multiple inputs on add button.

I have multiple formGroup in my setup. I get Error of "Cannot read property 'push' of null" when I try to add/push input.

Is it anything wrong with my formGroup setup or Is it because of Multiple FormGroups in formArray

My Code: 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>

Angular Code:

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: '',
    }));
}

I also have https://stackblitz.com/edit/angular-form-array-example-hfmrm2

Chellappan வ · Accepted Answer · 2020-10-04 16:25:18Z

0

Since you have nested formArray you have to change the template as follows.

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

edited Oct 4, 2020 at 16:25

answered Oct 4, 2020 at 14:34

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vicky Parab Over a year ago

Hey Thanx but I have multiple formGroups, for Example this is my main formArray as IM using Angular Material Stepper : this.resumeForm = this.fb.group({ formArray: this.fb.array([ this.fb.group({ jobName: ['', Validators.required], }), this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], }), this.fb.group({ facebook : ['', Validators.required], youtube: ['', Validators.required], }), this.fb.group({ credentials: this.fb.array([]) }), ])})

Vicky Parab Over a year ago

Please do let me know as I been struggling with this issue since hours

Chellappan வ Over a year ago

Why are you having differently named formGroup inside formArray?

Vicky Parab Over a year ago

I dont wanted to create multiple formGroup which will have to check and check for each form submission: material.angular.io/components/stepper/overview

Vicky Parab Over a year ago

Hey Mate Thans this worked for me, much Appreciated

Collectives™ on Stack Overflow

Angular FormArray - Cannot read property 'push' of null

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related