可用于验证的局部变量的Angular2动态名称

时间:2017-05-17 14:21:23

标签: angular angular-template angular-validation

我有几个需要验证的输入字段,当我分配本地模板变量(error-msg)并检查它们(#requireSomeProperty1)时,它可以与我的自定义组件*ngIf="requireSomeProperty1.errors"一起使用

<input type="hidden" [(ngModel)]="activeItem.SomeProperty1" name="SomeProperty1" #requireSomeProperty1="ngModel" [required]="someConditions1"/>
<error-msg *ngIf="requireSomeProperty1.errors" message="Property1 is required"></error-msg>

<input type="hidden" [(ngModel)]="activeItem.SomeProperty2" name="SomeProperty2" #requireSomeProperty2="ngModel" [required]="someConditions2"/>
<error-msg *ngIf="requireSomeProperty2.errors" message="Property2 is required"></error-msg>

现在不需要将它们硬编码为html模板,而是需要从数据库中加载它们。一切正常,但我不确定如何使用*ngFor生成错误检查/验证。

我尝试了这个,但我得到了解析错误:

<div *ngFor="let item of itemsFromDB; index as i">
    <input type="hidden" [(ngModel)]="activeItem[item.SomePropertyName]" [name]="item.SomePropertyName" #require_{{item.SomePropertyName}}="ngModel" [required]="item.SomeConditions">
    <error-msg *ngIf="require_{{item.SomePropertyName}}.errors" [message]="item.ErrorMessage"></error-msg>
</div>  

我也试过这个,但我也有错误:

<div *ngFor="let item of itemsFromDB; index as i">
    <input type="hidden" [(ngModel)]="activeItem[item.SomePropertyName]" [name]="item.SomePropertyName" #require_item.SomePropertyName="ngModel" [required]="item.SomeConditions">
    <error-msg *ngIf="require_item.SomePropertyName.errors" [message]="item.ErrorMessage"></error-msg>
</div>

我也试过这个,但我没有任何错误,但没有发生任何事情:

<div *ngFor="let item of itemsFromDB; index as i">
    <input type="hidden" [(ngModel)]="activeItem[item.SomePropertyName]" [name]="item.SomePropertyName" #require+item.SomePropertyName="ngModel" [required]="item.SomeConditions">
    <error-msg *ngIf="require+item.SomePropertyName.errors" [message]="item.ErrorMessage"></error-msg>
</div>

那么,我错过了什么?或者我想在这里做不可能的事情?

0 个答案:

没有答案