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

在这里，我们在数组内动态创建数组。

下面是预期结果的示例结构。

{
  "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());
        }
    }

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

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>

最后，这是一个 Demo：http://plnkr.co/edit/7tcLcnzALew3oKGenjwK?p=preview http://plnkr.co/edit/7tcLcnzALew3oKGenjwK?p=preview