Angular2：输入使用ngFor控制表单标记内的损失值-Java 学习之路

我在Angular2中开发了一个页面，它使用了表单标签，我在表格标签中使用ngFor渲染了输入控件 .

我创建了模型（DataModal）来表示每一行表 . 我创建了模型列表（DataModalList）并在点击按钮（addNewRow）时将每个模型添加到其中

我正面临添加新行时删除所选输入值的问题 . Things are working fine when I removed the form tag 我需要表单标签来执行验证 .

请找到以下代码：

模型：

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>

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>

回复于 2024-04-28T13:21:17+08:00

Angular2：输入使用ngFor控制表单标记内的损失值

1 回答

相关问题