Angular 4使用反应形式在数组内创建动态formArray

Question

在这里,我们动态创建数组内部数组.

以下是下面给出的预期结果的样本结构.

{
  "optionsRadios": null,
  "Package_Title": null,
  "HotelData": [
    {
      "Htitle": "",
      "HDescription": "",
      "hotelStar": "",
"RoomData": [
    {
      "Hotel_Room_Type": ""
    },
    {
      "Hotel_Room_Type": ""
    }
  ]
    }
  ]

}

我想动态创建HotelData,在该HotelData数组中我想动态创建RoomData数组字段.

我通过以下代码创建了HotelData字段:

    export class AddPackageComponent implements OnInit {
    ngOnInit() {
            this.invoiceForm = this._formBuild.group({
    Package_Title: [],
                HotelData: this._formBuild.array([this.addRows()])
    })
    }
    addRows() {
            return this._formBuild.group({
                Htitle: [''],
                HDescription: [''],
                hotelStar: ['']
            });

        }
addHotel() {
            const control: FormArray = this.invoiceForm.get(`HotelData`) as FormArray;
            control.push(this.addRows());
        }
    }

Answer 1

你走在正确的轨道上,我们只需要添加更多的代码......

addRows需要表单数组RoomData,这里我们也初步推送一个空表单组的房间.如果您不想要,请修改它.

addRows() {
  let group = this._formBuild.group({
    ...
    RoomData: this._formBuild.array([])
  });
  // push formgroup to array initially
  this.addRoom(group.controls.RoomData)
  return group;
}

addRoom 看起来像这样:

addRoom(hotel:any) {
  let group = this._formBuild.group({
    Hotel_Room_Type: ['']
  })
  hotel.push(group)
}

addRoom当我们想要为酒店添加新房间时,我们也是从模板调用的方法.记得从模板传递当前酒店作为参数.

至于添加新酒店,您的addHotel住宿方式就像现在一样.

然后到你的模板,相关的部分应该是这样的:

<div formArrayName="HotelData">
  <div *ngFor="let hotel of invoiceForm.get('HotelData').controls; let i = index" [formGroupName]="i" >
    <!-- form controls here -->
    <button (click)="addRoom(hotel.get('RoomData'))">Add Room</button>
    <div formArrayName="RoomData">
      <div *ngFor="let room of hotel.get('RoomData').controls; let j = index" [formGroupName]="j">
        <!-- form controls here -->
      </div>
    </div>
  </div>
</div>

最后,这是一个演示:http://plnkr.co/edit/7tcLcnzALew3oKGenjwK？p = preview