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

您可以为数组中的每个字段使用唯一的_app.factory('accountService', [ 'accountResource', function (accountResource) { var _self = this; return { register: function (authData) { return accountResource.register(authData); }, getMyAccountData: function () { return accountResource.getMyAccountData(); } } } ]); _app.factory('accountResource', [ '$resource', 'rootUrl', function ($resource, rootUrl) { var api = rootUrl() + 'api/Account'; return $resource(api, {}, { register: { method: 'POST', url: '{0}/register'.format(api) }, getMyAccountData: { method: 'GET', url: '{0}/GetMyAccountData'.format(api) } }); } ])。与index属性（和name）一起使用，它将分别评估每个表单控件。因此，每个输入字段都会获得唯一的名称，例如：

ngModel

我们从迭代中得到name="f{{i}}"：

{{i}}

最后，您的模板可能如下所示：

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

这是一个现场

Demo

Answer 2

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

Answer 3

但是，如果您具有选择选项，并且如果具有* ngFor for选项，则错误消息将丢失其映射，这是由于第二个* ngFor循环

更好地定义错误消息的自定义类并使用CSS显示：无或** block *

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

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

循环

3 个答案:

Demo