Question

有我的组件模型：

fields: Field [];

//where
export class Field { 
   key: string;
   value: string;
}

用户可以动态推送/删除此模型数组的项目：

pushField() {
    this.fields.push({ key: "", value: "" });
}
removeField(index: number) {
    this.fields.splice(index, 1);
}

我的目的是实现验证：任何value项都需要fields（不能为空字符串）：

<div *ngFor="let field of fields; let i = index;">
    <input [(ngModel)]="fields[i].value" #field="ngModel" [name]=" 'fields['+i+'].key' "  type="text" required />
    <div [hidden]="field.pristine || !(field.errors && field.errors.required)" class="alert alert-danger"> Required error message </div>
</div>

它起作用但我得到以下奇怪的行为：

有时，对于刚刚推送的项目（即忽略原始规则），不会隐藏错误消息
一个项目重复其他的错误信息隐藏状态（即，如果一个项目为空，则显示其他项目的错误信息） - 它很少发生。

这种行为的原因是什么？我认为得到字段项的引用是错误的：#field="ngModel"（此代码进入迭代）。那我怎么能得到正确的参考？

如何正确引用Array的项目（使用ngModel）？

0 个答案: