我有一个用模型生成的输入字段列表。我正在尝试为他们添加验证。 要求是它们不应为空或少于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的新手,所以我不确定我做错了什么。
答案 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">
这是一个现场
答案 1 :(得分:0)
在模型中准备数据并返回角度。模板中的角度和硬逻辑=坏朋友。
答案 2 :(得分:0)
但是,如果您具有选择选项,并且如果具有* ngFor for选项,则错误消息将丢失其映射,这是由于第二个* ngFor循环
更好地定义错误消息的自定义类并使用CSS显示:无或** block *
.custom-valid-box{
display: none;
}
.form-control-danger + .custom-valid-box{
display: block;
}