angular自定义表单验证器

由于内置验证器无法适用于所有应用场景，有时候还是得创建自定义验证器。

自定义指令去正则验证经纬度的 度、分、秒

import { Directive, Input} from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidatorFn, Validator} from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden:boolean = nameRe.test(control.value);
    return !forbidden ? {msg: {value: control.value}} : null;
  }
}

@Directive({
  selector: '[appValidatePosition]',
  providers: [{ provide: NG_VALIDATORS, useExisting: ValidatePositionDirective, multi: true }]
})
export class ValidatePositionDirective implements Validator{
  @Input('appValidatePosition') validateCondition: string;
  // console.log('control',control)
  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.validateCondition ? forbiddenNameValidator(new RegExp(this.validateCondition))(control): null;
  }
}

html 正则验证经纬度的度分秒

<td colspan="3">
    <input appValidatePosition="^(0|[1-9]|[1-8]\d|90)$" [(ngModel)]="station.latitudes[0]" name="latitudesDegrees" type="text" class="input-default input-position" />°
    <input appValidatePosition="^(0|[1-9]|[1-5]\d|60)$" [(ngModel)]="station.latitudes[1]" name="latitudesMinutes" type="text" class="input-default input-position" />'
    <input appValidatePosition="^((\d|[1-5]\d)(\.\d+)?|60)$" [(ngModel)]="station.latitudes[2]" name="latitudesSeconds" type="text" class="input-default input-position" />" N    
    <input appValidatePosition="^([0-9]|[1-9]\d|1[0-7]\d|180)$" [(ngModel)]="station.longitudes[0]" name="longitudesDegrees" type="text" class="input-default input-position" />°
    <input appValidatePosition="^(0|[1-9]|[1-5]\d|60)$" [(ngModel)]="station.longitudes[1]" name="longitudesMinutes" type="text" class="input-default input-position" />'
    <input appValidatePosition="^((\d|[1-5]\d)(\.\d+)?|60)$" [(ngModel)]="station.longitudes[2]" name="longitudesSeconds" type="text" class="input-default input-position" />" E</td>

总结
** 具体参考官方文档吧**