Reactive Forms, push another form group to a specific index in the form array

Question

I have inserted formgroup in my form array, now what I want to do is, on that formgroup, I want to push another form group on a specific index, I am working with this code but can't make it work.

//FORM
roomForm = this.formBuilder.group({
           roomNumber: ['', Validators.required],
           floorNumber: ['', Validators.required],
           type: ['', Validators.required],
           bedSpace: this.formBuilder.array([]),
           status: ['', Validators.required],
           tenant: [''],
           _id: ['']
  });
//GETTING THE bedSpace control
 get bedSpace() {
  return this.roomForm.get('bedSpace') as FormArray;
 }

//Adding form group to bedSpace control, p.s this is working fine
addBed() {
this.bedSpace.push(
    this.formBuilder.group({
      bedNumber: [bedNumber]

      })
  );
}

//Add new group to an existing form group in form array, this is the code 
that i cant make to work
addDeck(i: number) {
 this.roomForm.get(`bedSpace.${i}`).patchValue(
   this.formBuilder.group({
      deckNumber: [],
      status: [],
      dueRent: [],
      tenant: []
    })
);
}

Below is the screenshot of the json, What I want is to push the form group to index 0

       <div formArrayName="bedSpace">



        <div *ngFor="let bed of bedSpace.controls; let i = index">
          <mat-card fxLayoutAlign="space-between center" id="bed-panel">
            <span>
              BED
            </span>
            <span fxLayout="column" >
               <mat-icon id="remove-bed" 
    (click)="removeBed(i)">remove_circle_outline</mat-icon>
               <mat-icon id="add-deck" (click)="addDeck(i)">list</mat-icon>
            </span>
          </mat-card>
          <form [formGroup]="bed">
            <mat-form-field>
              <input matInput type="number" placeholder="Bed number" 
    formControlName="bedNumber">
            </mat-form-field>

This is how i display the input field for decks FormGroup, i get this "Cannot read property 'controls' of undefined" error, my guess is that it cannot see the "decks.controls" when it compiles, cause this is only added when I, add Deck, now my problem is where to put this "decks.controls".

            <div *ngFor="let deck of decks.controls; let i = index">
              <div [formGroup]="deck">
                <mat-form-field>
                  <input matInput type="number" placeholder="Deck number" 
   formControlName="deckNumber">
                </mat-form-field>
                <mat-form-field>
                  <mat-select placeholder="Bed status" 
   formControlName="deckStatus">
                    <mat-option *ngFor="let bedStatus of 
   roomEnumService.roomBedStatus;" [value]="bedStatus">
                      {{bedStatus}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <mat-form-field>
                  <input matInput type="text" placeholder="Due rent" 
   formControlName="dueRent">
              </mat-form-field>
              <mat-form-field>
                <input matInput type="number" placeholder="Tenant" formControlName="tenant">
              </mat-form-field>
              </div>
            </div>
          </form>
        </div>
      </div>

wannadream · Accepted Answer · 2018-10-11 13:28:23Z

1

After studying the API in https://angular.io/api/forms/FormArray, I revised your code to below. Please check if that is what you want.

addDeck(i: number) {
  const bs = this.bedSpace.at(i) as FormGroup;
  let decks = bs.get('decks') as FormArray;
  if (!decks) {
    decks = this.formBuilder.array([]);
    bs.addControl('decks', decks);
  }
  decks.push(this.formBuilder.group({
    deckNumber: [],
    status: [],
    dueRent: [],
    tenant: []
  }));
}

edited Oct 11, 2018 at 13:28

answered Oct 5, 2018 at 5:31

wannadream

1,7601 gold badge12 silver badges16 bronze badges

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

12 Comments

john cramer Over a year ago

hey, thank your for your reponse, tried above code, got this error "Property 'push' does not exist on type 'AbstractControl'."

john cramer Over a year ago

Tried casting it, to form array like this (this.bedSpace.at(i) as FormArray).push( this.formBuilder.group({ deckNumber: [], status: [], dueRent: [], tenant: [] }) ); "got this error this.bedSpace.at(...).push is not a function"

wannadream Over a year ago

Looks like bedSpace is a pure array? Can you try my modified one?

john cramer Over a year ago

I have also tried your code, it has this "Property 'push' does not exist on type AbstractControl" error.

wannadream Over a year ago

Now I see the problem of your code. I revised mine. Please make a try.

|

Collectives™ on Stack Overflow

Reactive Forms, push another form group to a specific index in the form array

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related