角度自定义验证器将模板应用于重复代码 [英] Angular custom validator apply template for repetitive code

问题描述

我有多个输入字段，几乎需要进行相同的验证.有什么方法可以减少显示错误的重复HTML代码.

I have multiple input fields where almost same validation is required. Is there any way to reduce repetitive HTML code for displaying error.

我的代码如下

              <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代码对于每个输入字段都是重复的.指令中可能有一种方法，我可以返回错误消息模板".而不是仅仅为空

Except input field and mandatory div tag all other validator html code is repeating for each input field. Is there a way may be in directive where I can return error message tamplates. instead of just null

推荐答案

您可以使用输入来创建组件属性类似

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

}

以html

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

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

Then use it under your input like

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

这篇关于角度自定义验证器将模板应用于重复代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！