Como sabemos, a veces los validadores incorporados pueden no cumplir nuestro requisito de validación, por lo que es posible que tengamos que escribir una lógica de validación personalizada para crear validadores de formularios personalizados.
Los validadores personalizados toman el valor del Control de Forma, donde cada entrada actúa como un Control de Forma. Así que vamos a crear un formulario junto con una función de validador.
Crea un nuevo archivo llamado customvalidator.validador.ts y pega la siguiente función.
12345678910111213141516171819202122import{FormGroup,AbstractControl}de"@angular/forms";// Para validar la contraseña y confirmar la función de exportaciónCompararContraseña(controlName:string, matchingControlName:string){retorno(formGroup:FormGroup)= controls[controlName];const matchingControl = formGroup.controls[matchingControlName];if(matchingControl.errors&&!matchingControl.errors.mustMatch){return;}if(control.value!== matchingControl.value){ matchingControl.setErrors({ mustMatch:true});}else{ matchingControl.setErrors(null);}};}tipografía
Esta es nuestra sencilla función de validación personalizada, que acepta el nombre del control junto con el nombre del control correspondiente, que básicamente compara dos campos diferentes para nuestro ejemplo.
El siguiente paso es usar esa función de validación personalizada en nuestro componente para inicializar el formulario junto con el nombre del validador de formularios personalizados.
Crea un nuevo componente llamado myform, abre myform.component.ts , y pega el siguiente código fuente.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354importar{Componente,OnInit}de"@angular/núcleo";importar{FormBuilder,FormGroup,Validators,AbstractControl}de"@angular/formas";importar{CompararContraseña,}de". ./validador de aduana/validador de aduana. validador";@Componente({ selector: "app-myform", templateUrl:"./myform.component.html", styleUrls:["./myform.component.css"]})exportclassMyformComponentimplementsOnInit{ registerForm:FormGroup; submitted =false;constructor(private formBuilder:FormBuilder){}ngOnInit(){this.registerForm=this.formBuilder. group({nombre:["",[Validators.required]], apellido:["",[Validators.required]], correo electrónico:["",[Validators.required,Validators.email]], contraseña:["",[Validators.required,Validators.minLength(6)]], confirmarContraseña:["",Validators. required]},{/// Used custom form validator name validador:ComparePassword("password", "confirmPassword")});}// Getter function in order to get form controls valuegetf(){returnthis.registerForm. controls;}onSubmit(){this.submitted=true;// Devuelve falso si el formulario es inválidoif(this.registerForm.invalid){return;}console.log("Form Values "+JSON.stringify(this.registerForm.value));}}tipografía
Déjeme explicarle lo que hemos hecho en este componente.
- Hemos inicializado el formulario usando FormBuilder y combinado todos los controles del formulario usando FormBuilder.
- Junto con todos y cada uno de los controles de forma, hemos usado validadores incorporados, incluyendo el requerido, el correo electrónico y la longitud mínima.
- Además de esos validadores incorporados, hemos utilizado un validador adicional, ComparePassword, que acepta la contraseña, la confirma y devuelve el resultado basado en la ejecución de la función.
Así es como hemos desarrollado nuestro validador de formularios personalizados. Vamos a implementar dos validadores de formularios personalizados más para los campos de nombre y apellido.
1234567// Para validar el nombrefunción de exportaciónValidarNombre(control:AbstractControl){if(!control.value.startsWith("@")){retorno{ validNombre:true};}retornonull;}tipografía
En esta función, obtendremos el control completo de la forma usando AbstractControl, que es la clase base para FormControl, FormGroup y FormArray.
Usando esa función, estamos validando que la cadena que estamos usando como primer nombre debe comenzar con el operador @; de lo contrario, devolvemos nulo como resultado.
1234567// Para validar el apellidoFunción de exportaciónValidar el apellido(control:AbstractControl){if(control.value.length<=3){retorno{ validLname:true};}retornonull;}tipografía
Este es otro validador de formularios personalizados que acepta la cadena del apellido y valida que el apellido debe tener más de tres caracteres de longitud.
Hasta ahora, hemos creado tres validadores de formularios personalizados diferentes:
- CompararContraseña
- Validar el nombre
- ValidarApellido
Antes de pasar a la sección de plantillas, tenemos que modificar nuestro código fuente del grupo de formularios en el componente de esta manera.
123456789101112131415ngOnInit(){this.registerForm=this.formBuilder.group({nombre:["",[Validators.required,ValidateFirstName]], apellido:["",[Validators.required,ValidateLastName]], correo electrónico:["",[Validators. required,Validators.email]], password:["",[Validators.required,Validators.minLength(6)]], confirmPassword:["",Validators.required]},{/// Usó el formulario personalizado validator name validador:ComparePassword("password", "confirmPassword")});}tipografía
Ahora hemos terminado con nuestras funciones de validación de formularios personalizados. Nuestro siguiente paso es crear un formulario visual en nuestra plantilla de aplicación.
Abrir myform.component.html y pegar las siguientes líneas de código.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970< form[formGroup]="registerForm"(ngSubmit)="onSubmit()"--> tabula Introtype="text "formControlName="firstName"[ngClass]="{ $0027is-invalid$0027: submitted && f. firstName.errors }"/><div*ngIf="submitted && f.firstName.errors"<div*ngIf="f.firstName.errors.required"``Nombre es requerido</div;;</div;;<div*ngIf="registerForm. get($0027firstName$0027).errors && registerForm.get($0027firstName$0027).dirty && registerForm.get($0027firstName$0027).errors. validFname "*; El nombre debe comenzar con @ </div></td></trurchurchschwestern;td;*Apellido :</td;<td;*;* inputtype="text "formControlName="lastName"[ngClass]="{ $0027is-invalid$0027: submitted && f. lastName.errors }"/><div*ngIf="submitted && f.lastName.errors"<div*ngIf="f.lastName.errors. required"³;Last Name es requerido</div;³;div*ngIf="registerForm.get($0027apellido$0027).errors && registerForm.get($0027apellido$0027).dirty && registerForm.get($0027apellido$0027).errors. validLname "*; El apellido debe ser: 3 </div;²/td;²/tr;²/tr;²/tr;²/td; Email :²/td;²/td;²/td;²; inputtype="text "formControlName="email"[ngClass]="{ $0027is-invalid$0027: submitted && f. email.errors }"/><div*ngIf="submitted && f.email.errors"<div*ngIf="f.email.errors.required"``El correo electrónico es requerido</div><div*ngIf="f.email.errors. email"; El email debe ser una dirección de correo electrónico válida</div;;/div;;/td;;/tr;;tr;;td;;Contraseña :;/td;;td;;inputtype="password "formControlName="password"[ngClass]="{ $0027is-invalid$0027: submitted && f. password.errors }"/;div*ngIf="submitted && f.password.errors"<div*ngIf="f.password.errors.required"``La contraseña es requerida</div><div*ngIf="f.password.errors. minlength"; La contraseña debe ser</div;;/div;;/div;;/td;;/tr;;tr;;/td;;Confirmar Contraseña :</td;;/td;;;/div;;/div;/div;/div;/div;/div;/div;/div;/div;/div;tr;/div;/div;/div;/div;/div;/div;/div; f. confirmPassword.errors }"/><div*ngIf="submitted && f.confirmPassword. errors"³;<div*ngIf="f.confirmPassword.errors.required"³;Confirm Password is required</div;;<div*ngIf="f.confirmPassword.errors. mustMatch"/Contraseña debe ser la misma que Confirmar contraseña</div;;/div;;/div;;/tr;;tr;;td;/botón;;Registrar</botón;;/div;;/tr;;/tabla;;;/form;html
Esto parece enorme a primera vista, pero no se preocupe, miraremos cada uno de los controles.
La parte más importante es la etiqueta de la forma, que denota que se trata de una forma junto con las propiedades adicionales, como formGroup, que hemos inicializado en el componente.
Junto con el formulario, tenemos una acción adjunta a él llamada ngSubmit. Esto significa que tan pronto como el formulario sea validado y enviado, la función onSubmit se activará en el componente.
En la forma, tenemos diferentes controles de entrada, junto con la sección adicional de div para mostrar algún error en la forma, que se ve así.
12345<inputtype="text "formControlName="firstName"[ngClass]="{ $0027is-invalid$0027: submitted && f.firstName.errors }"/ <<div*ngIf="submitted && f. firstName.errors"³;<div*ngIf="f.firstName.errors.required"³;Se requiere el nombre de pila</div;;html
La sección div se utiliza para mostrar el error para la validación del campo requerido, que proviene directamente del objeto de error del grupo de formularios.
Pero si tenemos un validador de formularios personalizado, es posible que el objeto del error sea diferente. Para ello, podemos obtener los errores usando el nombre del formulario, que puede ser implementado así en la plantilla.
123456<div*ngIf="registerForm.get($0027firstName$0027).errors && registerForm.get($0027firstName$0027).dirty && registerForm.get($0027firstName$0027).errors.validFname "* El nombre debe comenzar con @</div>
html
Aquí estamos obteniendo los errores para la forma específica de control usando su nombre y otros parámetros, como tocado, sucio y validFname, que es nuestro error personalizado generado directamente de la función de validación personalizada.
Para la comparación de contraseñas, hemos creado un objeto de error llamado mustMatch en la función del validador personalizado, por lo que se puede utilizar así.
12345678<inputtype="password "formControlName="confirmPassword"[ngClass]="{ $0027is-invalid$0027: submitted && f.confirmPassword.errors }"/ <<div*ngIf="submitted && f.confirmPassword.errors"<div*ngIf="f. confirmPassword.errors.required">Confirm Password is required</div><div*ngIf="f.confirmPassword.errors.mustMatch"> Password should be same as Confirm password </div></div>html
Así es como hemos accedido a los diferentes errores basados en el objeto de error, ya sea desde un validador incorporado o desde la función de validador personalizado.
Vamos a ejecutar este completo y completo ejemplo y ver cómo funciona.
Como pueden ver, hemos proporcionado valores erróneos contra los criterios de validación, y así es como el error apareció con el control de forma.
Ahora proporcionemos la contraseña incorrecta, confirmemos la contraseña y veamos si la función de validación de comparación de contraseñas funciona o no.
Proporcione un valor incorrecto a cada uno de los campos del formulario, y podremos ver que el error aparece mostrando que nuestra contraseña y la contraseña de confirmación no coinciden.
Ahora hemos implementado validadores de formularios personalizados completos de principio a fin utilizando diferentes estrategias y estructuras. Así, podemos utilizar diferentes enfoques basados en los criterios de validación personalizados.