角2反应型隔离范围

Question

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

基本上，如果我添加了多个组(下拉列表、文本框)，如果我尝试选择任何下拉列表，那么值应该在它旁边的文本框中反映出来，而不是全部。我试过使用NgModel，但它在所有textbox中填充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

看看你的柱塞密码，

你也得加上这个..。

模板中的：

<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可以使用所有控件，因此表单数据是正确填充的。