En algunos casos, es posible que queramos crear los validadores personalizados en función de nuestras necesidades, ya que los validadores incorporados no siempre se ajustarán a las necesidades exactas de su aplicación. Consideremos un ejemplo en el que estamos creando el validador personalizado prohibidoEmployeeNameValidator.
Nombre de archivo: forbidden-employeename.directive.ts
123456función de exportación para el Validador de Nombre de Empleado Prohibido(employeenameRe:RegExp):ValidatorFn{retorno(control:AbstractControl):{[key:string]:any}|null={{const prohibited = employeenameRe.test(control.value);return prohibited ?{$0027prohibitedEmployeeName$0027:{value: control.value}}:null;};}tipografía
La función aquí es en realidad una fábrica que toma una expresión regular para detectar un nombre de empleo específico prohibido y devuelve una función validadora. En el ejemplo anterior el nombre de empleado prohibido es «yash». El validador rechazará cualquier nombre de empleado que contenga «yash».
La fábrica del validador de nombre de empleado prohibido devuelve la función de validador configurada. Esa función toma un objeto de control angular y devuelve o bien null , si el valor de control es válido, o bien un objeto de error de validación . El objeto de error de validación suele tener una propiedad cuyo nombre es la clave de validación, $0027forbiddenEmployeeName$0027, y cuyo valor es un diccionario arbitrario de valores que se podría insertar en un mensaje de error, {employeename}.
Los validadores de asíncronos personalizados son similares a los validadores de sincronización, pero en su lugar deben devolver una Promesa u Observable que posteriormente emite un objeto nulo o un error de validación. En el caso de un Observable, el Observable debe completarse, momento en el que el formulario utiliza el último valor emitido para la validación.
Adición de validadores personalizados a los formularios basados en plantillas
En los formularios basados en plantillas, podemos añadir validadores personalizados añadiendo una directiva a la plantilla. No tenemos acceso directo a la instancia FormControl, así que no podemos pasar el validador como se hace con los formularios reactivos. La correspondiente directiva ForbiddenValidatorDirective sirve como un envoltorio alrededor del forbiddenEmployeeNameValidator. La correspondiente ForbiddenValidatorDirective sirve como un envoltorio alrededor del forbiddenEmployeeNameValidator.cuando registramos la directiva con Angular entonces Angular reconoce el papel de la directiva en el proceso de validación porque la directiva se registra a sí misma con el proveedor NG_VALIDATORS, un proveedor con una colección extensible de validadores. La clase de directiva entonces implementa la interfaz del validador, para que pueda integrarse fácilmente con las formas de Angular.
Nombre de archivo: forbidden-employeename.directive.ts
123456789101112@Directive({ selector:$0027[appForbiddenEmployeeName]$0027, proveedores:[{provide:NG_VALIDATORS, useExisting:ForbiddenValidatorDirective, multi: true}]})exportclassForbiddenValidatorDirectiveimplmentsValidator{ @Input($0027appForbiddenEmployeeName$0027) forbiddenEmployeeName:string;validate(control:AbstractControl):{[key:string]:any}|null{returnthis. forbiddenEmployeeName?forbiddenEmployeeNameValidator(newRegExp(this.forbiddenEmployeeName,$0027i$0027))(control):null;}}tipografía