使用Angular自定义字段校验指令的方法示例

providers: [
    {provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true}
  ]

import {Directive, Input} from '@angular/core';
import {Validator, AbstractControl, NG_VALIDATORS} from '@angular/forms';

@Directive({
  selector: '[appValidator]',
    providers: [
      {provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true}
    ]
})

export class ValidatorDirective implements Validator {
  @Input('appValidator') value: string;

  validate(control: AbstractControl): { [key: string]: any } | null {
    const validateMac = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]&＃63;)+$/;
    switch (this.value) {
      case 'mac':
        return validateMac.exec(control['value']) &＃63; null : {validate: true};
        break;
    }
  }

}

import {ValidatorDirective} from "../../shared/validator.directive";

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [
    ValidatorDirective
  ],
  providers: [
    AuthGuard
  ],
})

    
      
        
      
      
        请输入正确的Mac地址!
      
    
  

        请输入正确的Mac地址!