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的屏幕截图，我想要的是将表单组推送到索引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>

这是我如何显示卡座FormGroup的输入字段，出现此“无法读取未定义的属性'控件'”错误，我猜是它在编译时看不到“ 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: []
  }));
}

反应性表单，将另一个表单组推送到表单数组中的特定索引

1 个答案: