Question

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

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

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

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

＆＃13;

SELECT 
    COUNT(*)
FROM 
    (SELECT 
         h2.hacker_id, COUNT(c2.challenge_id) AS co
     FROM 
         hackers h2 
     INNER JOIN 
         challenges c2 ON h2.hacker_id = c2.hacker_id
     GROUP BY 
         h2.hacker_id
     HAVING 
         COUNT(c2.challenge_id) = 1)

＆＃13;

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>

这样可以保持形式的活力，这样您就可以添加多个酒店，多个房间，而且没有一家酒店的信息和/或房间与其他房间的冲突。

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

角度2反应形式隔离范围

2 个答案: