Solución:
importar {AbstractControl, FormBuilder, FormGroup, Validators} de
establezca la entrada de su contraseña en el grupo y no es necesario utilizar “ngModel”.
<div class="form-group row" formGroupName="passwords">
<div class="form-group">
<label for="password" class="control-label">Contraseña:</label>
<input type="password" class="form-control" formControlName="password" title="Please enter your password">
<p class="help-block" *ngIf="signUpForm.get('password').hasError('required') && signUpForm.get('password').touched">Debe ingresar una contraseña</p>
</div>
<div class="form-group">
<label for="confirmedPassword" class="control-label">Confirmar Contraseña:</label>
<input type="password" class="form-control" formControlName="confirmedPassword" title="Please re-enter your password">
<p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('required') && signUpForm.get('confirmedPassword').touched">Password must be required</p>
<p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('passwordMismatch') && signUpForm.get('confirmedPassword').touched">password does not match</p>
</div>
buildForm(): void {
this.userForm = this.formBuilder.group({
passwords: this.formBuilder.group({
password: ['', [Validators.required]],
confirm_password: ['', [Validators.required]],
}, {validator: this.passwordConfirming}),
});
}
agregue esta función personalizada para validar la contraseña y confirmar la contraseña
passwordConfirming(c: AbstractControl): { invalid: boolean } {
if (c.get('password').value !== c.get('confirm_password').value) {
return {invalid: true};
}
}
Mostrar error cuando la contraseña no coincide
<div style="color:#ff7355" *ngIf="userForm.get(['passwords','password']).value != userForm.get(['passwords','confirm_password']).value && userForm.get(['passwords','confirm_password']).value != null">
Password does not match</div>
El problema es que eres mezclar el módulo de formas reactivas con el enfoque de entrada. Esto está causando que te pongas undefined al pasar los valores al validador.
No necesitas atarte a la ng-model al usar las formas reactivas. En su lugar, debe acceder al valor de los campos desde la Instancia de FormGroup.
Hago algo como esto en una aplicación para validar la coincidencia de las contraseñas.
public Credentials: FormGroup;
ngOnInit() {
this.Credentials = new FormGroup({});
this.Credentials.addControl('Password', new FormControl('', [Validators.required]));
this.Credentials.addControl('Confirmation', new FormControl(
'', [Validators.compose(
[Validators.required, this.validateAreEqual.bind(this)]
)]
));
}
private validateAreEqual(fieldControl: FormControl) {
return fieldControl.value === this.Credentials.get("Password").value ? null : {
NotEqual: true
};
}
Tenga en cuenta que el validador espera una FormControl campo como parámetro y compara el valor del campo con el del valor del Password campo de la Credentials FormGroup.
En el HTML asegúrese de quitar el ng-model.
<input type="password" class="form-control" formControlName="confirmedPassword" title="Please re-enter your password" >
<!-- AND -->
<input type="password" class="form-control" formControlName="password" title="Please enter your password">
¡Espero que esto ayude!
Hay dos tipos de validadores: Validador de FormGroup y Validador de FormControl. Para verificar que dos contraseñas coincidan, debe agregar un validador de FormGroup. A continuación se muestra mi ejemplo:
Nota: this.fb es el FormBuilder inyectado
this.newAccountForm = this.fb.group(
{
newPassword: ['', [Validators.required, Validators.minLength(6)]],
repeatNewPassword: ['', [Validators.required, Validators.minLength(6)]],
},
{validator: this.passwordMatchValidator}
);
passwordMatchValidator(frm: FormGroup) {
return frm.controls['newPassword'].value === frm.controls['repeatNewPassword'].value ? null : {'mismatch': true};
}
y en el templo:
<div class="invalid-feedback" *ngIf="newAccountForm.errors?.mismatch && (newAccountForm.controls['repeatNewPassword'].dirty || newAccountForm.controls['repeatNewPassword'].touched)">
Passwords don't match.
</div>
los punto clave aquí es para agregar el validador FormGroup como el segundo parámetro al método de grupo.