Reactive Forms，将另一个表单组推送到表单数组中的特定索引

Question

我已经在我的表单数组中插入了表单组，现在我想做的是，在该表单组上，我想在特定索引上推送另一个表单组，我正在使用这段代码，但无法成功工作。

//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: []
    })
);
}

下面是json的截图，我要的是把form group push到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>

这就是我显示 decks FormGroup 的输入字段的方式，我得到这个 "Cannot read property 'controls' of undefined" 错误，我猜它在编译时看不到 "decks.controls"，因为它只在我，添加 Deck，现在我的问题是把这个 "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>

Answer 1

在研究了https://angular.io/api/forms/FormArray中的API之后，我将您的代码修改为如下。请检查这是否是您想要的。

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: []
  }));
}

Reactive Forms，将另一个表单组推送到表单数组中的特定索引

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

angular

angular-reactive-forms