forms - Angular 4使用 react 形式在数组内创建动态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