如何编写自定义验证器以进行响应式表单控制

Question

我想验证一个字段type使其在Array表单itemsFormArray包含重复的所选元素。 我为此编写了一个自定义验证器（ itemTypeValidator ），但未显示错误消息。 另外，我编写了一个自定义TypeItemErrorMatcher类，该类从ErrorStateMatcher实现，但无法正常工作（也就是说，如果调试函数isErrorState ，则断点不会在该位置停止）。 错误在哪里？

item.component.html

  <div *ngFor="let item of itemsFormArray.controls; let i = index"> <mat-form-field [floatLabel]="'never'"> <mat-select [value]="item.value.type" (selectionChange)="selectItemType($event, i)" [errorStateMatcher]="typeItemErrorMatcher"> <mat-option *ngFor="let itemType of itemTypes$ | async" [value]="itemType.code"> {{itemType.name}} </mat-option> </mat-select> <mat-error *ngIf="itemsFormArray.controls[i].get('type').hasError('itemTypeExisted')">Уже существует</mat-error> </mat-form-field> </div> 

item.component.ts

 typeItemErrorMatcher = new TypeItemErrorMatcher(); 

form.service.ts

 createItemsGroup(value: any): FormGroup { return this.fb.group({ type: [value.type, this.itemTypeValidator()] }); } itemTypeValidator(): ValidatorFn { return (itemTypeControl: FormControl): ValidationErrors => { const itemsFormArray = itemTypeControl.root.value.itemsContent; if (itemsFormArray && itemTypeControl.value.length !== 0) { const resultConditionItemType = itemsFormArray.items.some(item => { return itemTypeControl.value === item.type; }); return resultConditionItemType ? {itemTypeExisted: true} : null;; } }; } 

typeItemErrorMatcher.ts

 export class TypeItemErrorMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { return form.hasError('itemTypeExisted'); } } 

Answer 1

尝试：

 <mat-error *ngIf="myFormField.get('value').hasError(patternCustom)">required field</mat-error>