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

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

1 个答案: