En los formularios basados en plantillas, añadiremos validadores a través de atributos. Pero en las formas reactivas, añadimos funciones validadoras directamente para formar un modelo de control en la clase componente. Angular entonces llama a estas funciones siempre que el valor del control cambia.
Funciones del validador en formas reactivas
Hay básicamente dos tipos de funciones de validación:
- Sincroniza los validadores: Los validadores de sincronización son funciones que tomarán una instancia de control y devolverán o bien un conjunto de errores de validación o bien nulos inmediatamente. Podemos pasar estas funciones de validación de sincronización como segundo argumento cuando instanciamos un Control de Forma.
- Validadores Async: Los validadores Async son funciones que tomarán una instancia de control y devolverán una Promesa u Observable que más tarde emitirá un conjunto de errores de validación o nulos. Podemos pasar estas funciones de validadores asíncronos como tercer argumento cuando instanciamos un FormControl.
Validadores incorporados en formas reactivas
En las formas, podemos usar nuestras propias funciones de validación o algunos de los validadores incorporados del Angular.
Las funciones incorporadas del validador son los mismos atributos disponibles tanto para los formularios basados en plantillas como para los formularios reactivos, como los requeridos y los de longitud mínima, que pueden utilizarse como funciones de la clase Validadores.
Nombre de archivo: employee-form.component.ts
12345678910111213141516ngOnInit():void{this.employeeForm=newFormGroup({$0027employeename$0027:newFormControl(this.employee.name,[Validators.required,Validators.minLength(8),forbiddenEmployeeNameValidator(/yash/i)]),$0027address$0027:newFormControl(this. dirección.del.empleado),$0027empresa$0027:newFormControl(this.employee.company,Validators.required)});}getemployeename(){regresar este.employeeForm.get($0027employeename$0027);}getcompany(){regresar este.employeeForm.get($0027company$0027);}tipografía
Como podemos ver en el ejemplo anterior, el control de nombres de empleados establece dos validadores incorporados, Validators.required y Validators.minLength(8), y un validador personalizado, forbiddenEmployeeNameValidator. El ejemplo anterior añade algunos métodos de obtención. En una forma reactiva, siempre se puede acceder a cualquier control de forma a través del método get en su grupo padre, pero a veces es útil definir los getters como abreviaturas para la plantilla. Veamos ahora la plantilla para la entrada de nombre de empleado.
Nombre de archivo: employee-form.component.html
12345678910111213141516<input formControlEmployeeName =" employeename " required ><div *ngIf=" employeename.invalid && (employeename.dirty || employeename.touched)"<div *ngIf=" employeename.errors.required">EmployeeName es requerido. (employeename.errors.minlength)/div;div *ngIf=" employeename.errors.minlength"/div;div *ngIf=" employeename.errors.forbiddenEmployeeName"/nombre del empleado no puede ser yash./div;/div;
tipografía