Angular 2 反应形式隔离范围

Question

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

基本上，如果我添加多个组（下拉菜单、文本框），并且如果我尝试 select 任何下拉菜单，该值应该反映在它旁边的文本框中，而不是全部。我尝试使用 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>

这样保持了表格的动态性，可以添加多个酒店，多个房间，一个酒店的信息不会and/or房间与其他房间冲突。

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

Angular 2 反应形式隔离范围

Angular 2 Reactive Form Isolate Scope

angular

angular-reactive-forms