04.09.2021 a las 10:30
Angular tiene 11 métodos para crear validaciones, que son:
class Validators { static min(min: number): ValidatorFn static max(max: number): ValidatorFn static required(control: AbstractControl): ValidationErrors | null static requiredTrue(control: AbstractControl): ValidationErrors | null static email(control: AbstractControl): ValidationErrors | null static minLength(minLength: number): ValidatorFn static maxLength(maxLength: number): ValidatorFn static pattern(pattern: string | RegExp): ValidatorFn static nullValidator(control: AbstractControl): ValidationErrors | null static compose(validators: ValidatorFn[]): ValidatorFn | null static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null }
Puedes obtener más información en su sitio oficial
El objetivo de este artículo, es crear validaciones personalizadas, ya que con las validaciones que nos ofrece Angular no puedo cubrir por ejemplo, en un formulario de registro, antes de enviarlo al backend comprobar que el campo de contraseña y el de "repite contraseña" sean iguales.
Yo lo voy a hacer todo dentro del mismo componente, si necesitaras usar la función de validación personalizada que vamos a crear te recomiendo que la crees en un archivo distinto para poder reutilizar el código, recuerda don't repeat yourself DRY
En el contructor creas el formulario reactivo con un form builder
constructor(private fb: FormBuilder) { this.mForm = this.fb.group({ email: new FormControl('',[Validators.required, Validators.email]), password: new FormControl('', [ Validators.required, Validators.minLength(12) ]), repeat_password: new FormControl('', [ Validators.required, Validators.minLength(12) ]) },{validators:[this.passwordValidator()]}); }
El método personalizado que crearemos debe devolver una función (closure) según la documentación de Angular.
Si la validación es correcta, es decir, si la validación se pasa sin errores debemos devolver siempre un null, si no, debemos devolver el error como un objeto.
public passwordValidator(): ValidatorFn { return (formGroup: FormGroup) => { const password:string = formGroup.get('password').value; const repeat_password:string = formGroup.get('repeat_password').value; if(password!==repeat_password) return {isValid:false}; return null; }; }
Hasta luego 🖖