角度 2 反应式形式隔离范围

Question

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

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

在我的褶皱里。红色框是我想要的，但是对于单个下拉列表，我可以使用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>

普伦克代码

Answer 1

您更新的 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>

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

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

Answer 2

看看你的 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，因此表单数据将正确填充。