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

【问题标题】：angular 2 validation on dynamic generated fields in loop循环中动态生成字段的角度 2 验证
【发布时间】：2017-08-23 07:41:37
【问题描述】：

我有一个使用模型生成的输入字段列表。我正在尝试向他们添加验证。要求是它们不能为空或少于 2 个字符。问题在于文档中仅显示使用非动态生成的变量名称进行验证。我的字段都是动态生成的。所以没有 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>

打字稿中的 configFields 看起来像这样：

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

}

但这根本行不通。我是 Angular 2 的新手，所以我不确定我做错了什么。

【问题讨论】：

查看此文档：angular.io/docs/ts/latest/cookbook/dynamic-form.html

标签： html validation angular typescript

【解决方案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>

现场直播

Demo

【讨论】：

这很有趣。这意味着 Angular 可以将值绑定到前端临时变量以及后端代码。
不太清楚你的意思？对于后端代码，您是指从后端接收到的模型/值，可以设置为默认值，或者您是什么意思？ :)
顺便说一句，我将你的字段的单向绑定更改为双向绑定，因为我看到你在你的问题中使用了它，所以如果你需要/想要它...
很高兴听到！ :) 祝您度过愉快的一天/晚上/早上，具体取决于您的时区：P 和快乐的编码！
很好的简单解释。从这里得到了正确的答案..非常感谢

【解决方案2】：

在模型中准备数据并返回角度。模板中的角度和硬逻辑 = 坏朋友。

【讨论】：

【解决方案3】：

但是如果你有一个 select 选项并且如果有 *ngFor for 选项那么错误消息会丢失它的映射，由于第二个 *ngFor 循环

最好为错误消息定义自定义类并使用 css 显示：none 或 **block*

.custom-valid-box{
  display: none;
 }

.form-control-danger + .custom-valid-box{
   display: block;
 }

【讨论】：