Angular2：Input控制表單標籤內部的損失值ngFor

我已經開發了一個使用表單標籤的Angular2中的頁面，並且我已經使用表格標籤中的ngFor呈現了輸入控件。Angular2：Input控制表單標籤內部的損失值ngFor

我創建了模型（DataModal）來表示表的每一行。我已經創建了模型列表（DataModalList），並通過單擊按鈕不斷添加每個模型（addNewRow）

我正面臨着添加新行時刪除選定輸入值的問題。 事情工作正常，當我刪除表單標籤 我需要表單標籤來執行驗證。

請找到下面的代碼：

型號：

import {DropDownModel} from '../models/dropDownModel';  
export class DataModal { 
    dropdown: DropDownModel[]; 
    selectedValue: string; 
    constructor() {          
      this.selectedValue = "0";   
     } 
}

組件：

addNewRow() {  
    let dataModal = new DataModal(); 
    dataModal.dropdown = response; //values are coming from api 
    this.DataModalList.push(dataModal); 
}

HTML：

<form novalidate #form="ngForm" (ngSubmit)="submitEditForm(form.valid)"> 
    <table> 
     <tr *ngFor="let item of DataModalList;let i= index "> 
      <td class="col-md-3"> 
       <div> 
        <label class="control-label" for="BoxID"> Box Number </label> 
        <select class="form-control" #BoxID="ngModel" name="BoxID" [(ngModel)]="item.selectedValue"> 
          <option value="0" disabled > -- select -- </option> 
          <option *ngFor="let element of item.dropdown"               
           [value]="element.value" >{{element.label}}</option> 
         </select> 
       </div> 
      </td> 
      <td class="col-md-3"> 
       <div> 
        <a title="Add" (click)="addNewRow()" class="btn blue btn-sm"> 
         <i class="fa fa-plus"></i> 
        </a> 
       </div> 
      </td> 
     </tr> 
    </table></form>

來源

2017-01-05 Jayakrishnan Gounder

我建議你使用反應型表格組。用你的代碼提供一個工作的plunker，我會嘗試修復它。 –

你的控制需要唯一的名稱在HTML中正常工作頁。

所以使用指數，我也在名屬性。使用以下代碼：

<select class="form-control" #BoxID="ngModel" name="BoxID-{{i}}" 
[(ngModel)]="item.selectedValue" [ngModelOptions]="{standalone: true}> 
<option value="0" disabled > -- select -- </option> 
<option *ngFor="let element of item.dropdown"               
    [value]="element.value" >{{element.label}} 
</option> 
</select>

來源

2017-01-06 05:53:28

Angular2：Input控制表單標籤內部的損失值ngFor

回答

相關問題