contraseña y confirmar validación de campo de contraseña angular2 formas reactivas

Necesito comprobar si los campos de contraseña y confirmar contraseña tienen el mismo valor usando la forma reactiva angular2. Vi muchas respuestas en el mismo aquí, la forma angular 2 para validar la contraseña de repetición , Comparación de campos en el validador con angular2 , pero ninguna parecía funcionar para mí. Puede alguien ayudarme. “Esto” no está definido en mi función de validación: (. Compartir mi código,

this.addEditUserForm = this.builder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], title: ['', Validators.required], email: ['', Validators.required], password: ['', Validators.required], confirmPass: ['', [Validators.required, this.validatePasswordConfirmation]] }); validatePasswordConfirmation(group: FormGroup): any{ let valid = true; // if (this.addEditUserForm.controls.password != this.addEditUserForm.controls.confirmPass) { // valid = false; // this.addEditUserForm.controls.confirmPass.setErrors({validatePasswordConfirmation: true}); // } return valid; } 

Esto es lo que finalmente funcionó para mí:

 this.addEditUserForm = this.builder.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], title: ['', Validators.required], email: ['', Validators.required], password: ['', Validators.required], confirmPass: ['', Validators.required] },{validator: this.checkIfMatchingPasswords('password', 'confirmPass')}); checkIfMatchingPasswords(passwordKey: string, passwordConfirmationKey: string) { return (group: FormGroup) => { let passwordInput = group.controls[passwordKey], passwordConfirmationInput = group.controls[passwordConfirmationKey]; if (passwordInput.value !== passwordConfirmationInput.value) { return passwordConfirmationInput.setErrors({notEquivalent: true}) } else { return passwordConfirmationInput.setErrors(null); } } } 

Lo mejor sería tener un grupo nested dentro del grupo de formularios, donde tenemos un validador personalizado que verifica el grupo de formularios con password y confirmPass , por lo que cuando se cambia cualquiera de los campos, se confirmPass el validador, como anteriormente solo se confirmPass cuando confirmPass el campo está modificado.

Entonces, en lugar de hacer algo como esto dentro del formgroup externo:

 // ... passwords: this.fb.group({ password: ['', [...]], confirmPass: ['', [...]] }, {validator: this.checkPasswords}) // add a validator for the whole group // ... 

y luego el validador podría verse así:

 checkPasswords(group: FormGroup) { // here we have the 'passwords' group let pass = group.controls.password.value; let confirmPass = group.controls.confirmPass.value; return pass === confirmPass ? null : { notSame: true } } 

Mostrar el error de validación podría hacerse así:

 *ngIf="addEditUserForm.hasError('notSame', 'passwords')" 

Por supuesto, no es necesario tener un grupo nested, pero es mejor no activar el validador personalizado cada vez que se produzcan cambios en el formulario. De esta forma, solo se activa cuando ocurren cambios en este grupo de formularios interno.

Si desea hacerlo de esa manera, necesita vincular la función al contexto actual “este”. Pase this.validatePasswordConfirmation.bind(this) pero tenga en cuenta que a esta función se le pasará el FormControl para la confirmación, y no el FormGroup como usted indicó en la firma de la función.

Hice un enfoque diferente que funcionará para cualquier control. Primero defino los controles básicos de la forma:

  this.myForm = this.formBuilder.group({ name: ['', Validators.required], password: ['', Validators.required], }); 

Luego creo un nuevo control para confirmar el valor con mi validador personalizado:

  const confirmPasswordControl = new FormControl('', { validator: sameValueAs(this.myForm, 'password') }); this.myForm.addControl('confirmPassword', confirmPasswordControl); 

El código del sameValueAs validador sameValueAs es el siguiente, puede definirlo en un archivo separte para ser utilizado en cualquier lugar

 export function sameValueAs(group: FormGroup, controlName: string): ValidatorFn { return (control: FormControl) => { const myValue = control.value; const compareValue = group.controls[controlName].value; return (myValue === compareValue) ? null : {valueDifferentFrom:controlName}; }; } 

Si no desea pasar por un validador personalizado, puede simplemente crear un campo de entrada que sea independiente y, por lo tanto, no se calculará en su formGroup, sino a través de ngModel.

Luego, en su ts solo puede validar y arrojar un error o invalidar el formulario si lo desea. Lo encontré un poco más rápido y práctico:

// Verificar contraseñas

  if (this.staffAccountForm.value.password !== this.passwordConfirm) { this.snackbar.snackBarSimple('Passwords do not match.'); return false; }