循环

时间:2017-03-29 17:12:08

标签: html5 validation angular typescript

我有一个用模型生成的输入字段列表。我正在尝试为他们添加验证。 要求是它们不应为空或少于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的新手,所以我不确定我做错了什么。

3 个答案:

答案 0 :(得分:8)

您可以为数组中的每个字段使用唯一的_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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

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