Angular2: Input Controls значение потерь внутри тега формы с ngFor

Question

Я разработал страницу в Angular2, которая использует тег формы, и я отобразил элементы управления вводами, используя 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> 

Answer 1

Ваши контроля должны уникальные имена для правильной работы в HTML стр.

Таким образом, используйте index-i также в имя атрибут. используйте нижеприведенный код:

<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>