La validación de los formularios será útil para validar las entradas del usuario y asegurar su integridad y exactitud.
Los formularios reactivos incluyen funciones de validación que recibirán el control para validar y devolver un objeto de error o un valor nulo basado en la comprobación de validación.
1. Importar una función validadora
Importemos la clase de Validadores del paquete @angular/formas.
Nombre de archivo: employeeProfile-editor.component.ts
1importar{validadores}de$0027@angular/formas$0027;tipografía
2. Hacer un campo obligatorio en el formulario
En esta sección, veremos cómo agregar una validación requerida al control de nombre de pila del empleado.
Ahora, agreguemos el componente Editor de Perfiles de Empleados. Añade el método estático Validators.required como el segundo elemento de la matriz para el control EmployeeFirstName.
Nombre de archivo: employeeProfile-editor.component.ts
12345678910profileForm =this.fb.group({ employeeFirstName:[$0027$0027,Validators.required], employeeLastName:[$0027$0027], employeeAddress:this.fb.group({ street:[$0027$0027], city:[$0027$0027], state:[$0027$0027], zip:[$0027$0027]}),});tipografía
HTML5 tiene un conjunto de atributos incorporados que se pueden utilizar para la validación nativa, incluyendo el requerido, la longitud mínima y la longitud máxima. Puede aprovechar estos atributos opcionales en sus elementos de entrada de formularios. Agregue el atributo requerido al elemento de entrada employeeFirstName.
Nombre de archivo: employeeProfile-editor.component.html
1<inputtype="text "formControlName="firstName "required;
html
Visualización del estado de los controles de forma
El estado inicial, cuando se añade un control de formulario, es inválido. Este estado inválido se propaga al elemento del grupo de formulario padre, haciendo que su estado sea inválido. El elemento padre del grupo de formularios accede al estado actual de la instancia del grupo de formularios a través de su propiedad de estado. A continuación, mostrará el estado actual de profileForm mediante interpolación.
Nombre de archivo: employeeProfile-editor.component.html
123<p> Estado del formulario: {{ profileForm.status }}</promedio html