角度自定义验证器应用模板用于重复代码

Question

我有多个输入字段，需要几乎相同的验证。有没有办法减少显示错误的重复HTML代码。

我的代码如下

<div colspan="2">
<input type="text" name="appName" [disabled]="recordCreated" [(ngModel)]="appName" appForbiddenName="Application" minlength="4"
required #name="ngModel" [ngClass]="{'has-danger': name.invalid && (name.dirty || name.touched) }" />
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors.forbiddenName">
Name cannot be Application.
</div>
</div>
</div>
<div colspan="2">
<input type="text" name="appName" [disabled]="recordCreated" [(ngModel)]="desc" appForbiddenName="Application" minlength="4"
required #desc="ngModel" [ngClass]="{'has-danger': desc.invalid && (desc.dirty || desc.touched) }" />
<div *ngIf="desc.invalid && (desc.dirty || desc.touched)" class="alert alert-danger">
<div *ngIf="desc.errors.required">
Desc is required.
</div>
<div *ngIf="desc.errors.minlength">
Desc must be at least 4 characters long.
</div>
<div *ngIf="desc.errors.forbiddenName">
Desc cannot be Application.
</div>
</div>
</div>

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
import { AbstractControl } from '@angular/forms/src/model';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl) : {[key: string] : any} | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
};
}
@Directive({
selector: '[appForbiddenName]',
providers: [{ provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true }]
})
export class ForbiddenValidatorDirective implements Validator {
@Input('appForbiddenName') forbiddenName: string;
validate(control: AbstractControl): { [key: string]: any } | null {
return this.forbiddenName ? forbiddenNameValidator(new RegExp
(this.forbiddenName, 'i'))(control) : null;
}

}

除了输入字段和强制性div 标记外，所有其他验证器 html 代码对每个输入字段都是重复的。有没有一种方法可以在指令中返回错误消息 tamplates。而不仅仅是空

Answer 1

您可以创建一个具有类似输入属性的组件

export class YourCustomComponent{
@Input() control:FormControl;
@Input() errMessages:any;//it should be an object like {required:'desc is req'}
constructor(){
}
}

在网页中

<div *ngIf="control.invalid && (control.dirty || control.touched)" class="alert alert-danger">
<div *ngIf="control.errors.required">
errMessages.required
</div>
......so on
</div>

然后在您的输入下使用它，例如

<your-custom-component [control]="desc" [errMessages]="{required:'desc is required'}"> </your-custom-component>