Angular 2 反应形式隔离范围

Question

我是响应式表单的新手。在下面的代码中，我有可以添加或删除表单组的房间类型。当我在下拉列表中选择房间类型的任何值时，它应该在它旁边的输入框中填充下拉值。但我想隔离范围。

基本上，如果我添加了多个组（下拉菜单，文本框），并且如果我尝试选择任何下拉列表，则值应该反映在它旁边的文本框中，而不是全部。我尝试使用 ngModel，但它会在 NgModel 中重复名称的所有文本框中填充值。

在我的 plunker 中。红框是我想要的，但是对于单个下拉列表，我可以使用 ngModel 来实现。当我们使用 FormArray 时，我们不能在 ngModel 中使用相同的名称。

请帮忙。我尝试找到类似的问题，但没有任何帮助。

<form [formGroup]="invoiceForm">
    <label>Package Title: </label>
    <input formControlName="Package_Title"/>
    <hr>
    <div formArrayName="HotelData">
      <div *ngFor="let hotel of invoiceForm.controls.HotelData.controls; let i = index" [formGroupName]="i" >
        <fieldset>
          <label>Hotel Title </label>
          <input formControlName="Htitle" />
          <button (click)="addRoom(hotel.controls.RoomData)">Add Room</button>
          <div formArrayName="RoomData">
            <div *ngFor="let room of hotel.controls.RoomData.controls; let j = index" [formGroupName]="j">
              <fieldset>
                <label>Room Type</label>
                <select>
                  <option *ngFor="let a of list">{{a}}</option>
                </select>
                <input formControlName="Hotel_Room_Type">
              </fieldset>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
    </form>

Plunker Code

Answer 1

查看您的 plunkr 代码，

你也需要添加这个..

在您的模板中：

<select formControlName="Hotel_Room_Color">
    <option *ngFor="let a of list">{{a}}</option>
</select>

在您的组件中：

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

说明：

在这些添加之后，您的formGroup 可以使用所有控件，因此表单数据被正确填充。

Answer 2

您更新的 plunkr 代码是一种新要求，不适合最初提出的问题，所以在这里写下第二个答案...

您需要对模板代码进行的简单更改是：

<fieldset>
    <label>Room Type</label>
    <select formControlName="color" #room_type>
         <option *ngFor="let a of list">{{a}}</option>
    </select>
    <input formControlName="Hotel_Room_Type" [(ngModel)]="room_type.value">
</fieldset>

这保持了表单的动态性，因此您可以添加多个酒店，多个房间，并且没有一个酒店的信息和/或房间与其他的冲突。

我希望这是您所需要的。 :)