Angular2：输入控制带有ngFor的表单标签内的损失值

Posted 2023-02-22

【中文标题】Angular2：输入控制带有ngFor的表单标签内的损失值

【英文标题】：Angular2: Input Controls losses value inside form tag with ngFor

【发布时间】：2017-05-20 01:48:10

【问题描述】：

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

【问题讨论】：

我建议你使用反应式表单组。为您的代码提供一个有效的 plunker，我会尝试修复它。

【参考方案1】：

您的控件需要唯一的名称才能在 html 页面中正常工作。

所以在 name 属性中也使用 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>