He construido mi PasswordValidator de la siguiente manera:
// Function to compare password with confirmPassword export function ConfirmedValidator(controlName: string, matchingControlName: string) { return (formGroup: FormGroup) => { const control = formGroup.controls[controlName]; const matchingControl = formGroup.controls[matchingControlName]; if (matchingControl.errors && !matchingControl.errors.confirmedValidator) { return; } if (control.value !== matchingControl.value) { matchingControl.setErrors({ confirmedValidator: true }); } else { matchingControl.setErrors(null); } }; }He creado el formulario en ngOnInit:
ngOnInit() { // Create user password form this.cupForm = this.formBuilder.group( { password: [null, Validators.pattern('^(?=.*?[AZ])(?=.*?[az])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,}$')], confirm_password: [null, Validators.required] }, { validator: ConfirmedValidator('password', 'confirm_password') }); }El validador funciona, pero el grupo Aufrauf después de formBuilder se muestra como obsoleto. ¿Cómo puedo resolver el problema? ¿Tienes alguna idea?
El método FormGroup con tipo de índice está obsoleto en angular 11+, ahora debemos proporcionar validadores como opciones de configuración para formGroup
Cambiar validator ==> validators
this.cupForm = this.formBuilder.group( { password: [null, Validators.pattern('^(?=.*?[AZ])(?=.*?[az])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,}$')], confirm_password: [null, Validators.required] }, { validators: ConfirmedValidator('password', 'confirm_password') }); Luego agregue el tipo de retorno ValidationErrors|null al método customValidator
export function ConfirmedValidator(controlName: string, matchingControlName: string) { return (formGroup: FormGroup):ValidationErrors|null => { const control = formGroup.controls[controlName]; const matchingControl = formGroup.controls[matchingControlName]; if (matchingControl.errors && !matchingControl.errors.confirmedValidator) { return; } if (control.value !== matchingControl.value) { matchingControl.setErrors({ confirmedValidator: true }); } else { matchingControl.setErrors(null); } }; }