循环中动态生成字段的角度2验证

Question

我有一个用模型生成的输入字段列表.我正在尝试为他们添加验证.要求是它们不应为空或少于2个字符.问题在于文档中仅显示使用非动态生成的变量Name进行验证.我的字段都是动态生成的.所以没有tempVariableName我可以硬编码(否则它们会冲突),所以我从我将字段绑定到的属性的名称创建了temp变量.所以我提出了这样的事情:

    <div *ngFor="let field of connector.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'"
           placeholder="{{field.name}} (required)"
           ngControl="[fieldName+field.name]"
           required minlength="2"
           #fieldName+[field.name]="ngModel" />
    <div *ngIf="(fieldName+[field.name]).errors && ((fieldName+[field.name]).dirty || (fieldName+[field.name]).touched)">
        <span *ngIf="(fieldName+[field.name]).errors.required">Enter Name</span>
        <span *ngIf="(fieldName+[field.name]).errors.minlength">Name minimum at 2 characters</span>
    </div>
</div>

typescript中的configFields如下所示:

export class FieldModel {
public name: string;
public type: string;
public value: any;

}

但这根本行不通.我是角度2的新手,所以我不确定我做错了什么.

Answer 1

您可以index对阵列中的每个字段使用唯一.将它与name属性(和ngModel)一起使用,它将分别评估每个表单控件.因此每个输入字段都有唯一的名称,例如:

name="f{{i}}"

我们{{i}}从迭代中得到的地方:

<div *ngFor="let field of connector.configFields; let i = index">

最后,您的模板可能如下所示:

<form #myForm="ngForm">
  <div *ngFor="let field of connector.configFields; let i = index">
    <input name="f{{i}}" [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'" required #f="ngModel" minlength="2"/>
    <div *ngIf="f.errors && (f.dirty || f.touched)">
      <div *ngIf="f.errors.required"> This field is required </div>
      <div *ngIf="f.errors.minlength"> Min 2 chars </div>
    </div>
  </div>
</form>

这是现场直播

演示