针对项目数组的动态表单中的自定义验证

Question

我有一个可以动态编辑的 Person[]，一次一个，所以我有以下内容：

<template ngFor let-indx="index" let-persons [ngForOf]="persons">
    <div *ngIf="!person.isEditing">
        <h4>{{person.name}}</h4>
    </div>
    <div *ngIf="person.isEditing">
        <form #addNewGuestForm="ngForm" novalidate>
            <input [(ngModel)]="person.name" #personName="ngModel" required maxlength="50" minlength="2">
        </form>
    </div>
    <button (click)="person.isEditing=!person.isEditing">Edit/Save</button>
</template>

注意： 表单由 *ngIf 包装。

问题：如何验证名字是唯一的并且不会与 persons 数组中的其他名字冲突？我尝试执行以下操作，但我得到了经典：Can't bind to 'persons' since it isn't a known property of 'input':

@Directive({
    selector: '[uniqueValidator][ngModelGroup]',
    providers: [{ provide: NG_VALIDATORS, useExisting: UniqueValidator, multi: true }]
})
export class UniqueValidator implements Validator {
    @Input() persons: Person[];
    validate(control: FormGroup): { [key: string]: any } {
        //validation against other items in persons
    }
}

并且 html 变为：

<input uniqueValidator [persons]="persons" [(ngModel)]="person.name" #personName="ngModel" required maxlength="50" minlength="2">

注意： 我已将 UniqueValidator 包含在 @NgModule 的 declarations 部分中。

Answer 1

选择器是罪魁祸首，将其更改为

selector: '[uniqueValidator][ngModel]'

成功了！

针对项目数组的动态表单中的自定义验证

Custom Validation in dynamic Form against array of item

validation

angular2-forms

angular