javascript - online - El validador personalizado en forma reactiva para la contraseña y confirma la coincidencia de la contraseña obteniendo parámetros no definidos en Angular 4

get element inside iframe jquery

Question

Estoy intentando implementar un validador personalizado para verificar si la contraseña y la confirmación de contraseña son iguales. El problema es que el validador está obteniendo una contraseña no definida y parámetros confirmados de contraseña. ¿Cómo hago este trabajo? La función funciona porque si cambio la condición a === en lugar de! == arroja el error correctamente cuando los campos son los mismos. ¿Alguien sabe cual es el error aquí?

signup.component.html

<div class="col-md-7 col-md-offset-1 col-sm-7">
<div class="block">
<div class="well">
<form (onSubmit)="onSubmit()" [formGroup]="signUpForm">
<div class="form-group">
<label for="username" class="control-label">Nombre de usuario:</label>
<input type="text" class="form-control" formControlName="username" title="Please enter your username" placeholder="username">
<p class="help-block" *ngIf="signUpForm.get(''username'').hasError(''required'') && signUpForm.get(''username'').touched">El nombre de usuario es obligatorio</p>
<p class="help-block" *ngIf="signUpForm.get(''username'').hasError(''minlength'') && signUpForm.get(''username'').touched">El nombre de usuario debe tener al menos 6 caracteres</p>
<p class="help-block" *ngIf="signUpForm.get(''username'').hasError(''maxlength'') && signUpForm.get(''username'').touched">El nombre de usuario debe tener menos de 15 caracteres</p>
</div>
<div class="form-group">
<label for="email" class="control-label">E-mail:</label>
<input class="form-control" formControlName="email" title="Please enter your email" placeholder="[email protected]">
<p class="help-block" *ngIf="signUpForm.get(''email'').hasError(''required'') && signUpForm.get(''email'').touched">La dirección de email es obligatoria</p>
<p class="help-block" *ngIf="signUpForm.get(''email'').hasError(''email'') && signUpForm.get(''email'').touched">Debe ingresar una dirección de correo válida</p>
</div>
<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" [(ngModel)]="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" [(ngModel)]="confirmedPassword">
<p class="help-block" *ngIf="signUpForm.get(''confirmedPassword'').hasError(''required'') && signUpForm.get(''confirmedPassword'').touched">La confirmación de contraseña no puede estar vacía</p>
<p class="help-block" *ngIf="signUpForm.get(''confirmedPassword'').hasError(''passwordMismatch'') && signUpForm.get(''confirmedPassword'').touched">Las contraseñas no coinciden</p>
</div>
<button type="submit" class="btn btn-success" [disabled]="!signUpForm.valid">Registrarse</button>
<a routerLink="/signin" class="btn btn-default" style="">Ya tenes usuario? Logueate</a> {{ creationMessage }}
</form>
</div>
</div>
</div>

signup.component.ts

import { Component, OnInit, ViewChild, Input } from ''@angular/core'';
import { FormControl, FormGroup, Validators } from ''@angular/forms'';
import { CustomValidators } from ''../../shared/custom-validators'';
import { Observable } from ''rxjs/Observable'';
@Component({
selector: ''app-signup'',
templateUrl: ''./signup.component.html'',
styleUrls: [''./signup.component.sass'']
})
export class SignupComponent implements OnInit {
signUpForm: FormGroup;
user = {
username: '''',
email: '''',
password: ''''
};
submitted = false;
@Input() password='''';
@Input() confirmedPassword='''';
constructor() { }
ngOnInit() {
this.signUpForm = new FormGroup({
''username'': new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
''email'': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(5)]),
''password'': new FormControl(null, [Validators.required]),
''confirmedPassword'': new FormControl(null, [Validators.required, CustomValidators.passwordsMatch(this.password,this.confirmedPassword).bind(this)])
});
}
onSubmit() {
if (this.signUpForm.valid) {
console.log(this.signUpForm.value);
}
}
}

validadores personalizados.ts

 import { FormControl } from ''@angular/forms'';
export class CustomValidators{
public static passwordsMatch(password: string, confirmedPassword: string) {
return (control: FormControl) : { [s: string]: boolean } =>{
//getting undefined values for both variables
console.log(password,confirmedPassword);
//if I change this condition to === it throws the error if the
// two fields are the same, so this part works
if (password !== confirmedPassword) {
return { ''passwordMismatch'': true }
} else {
//it always gets here no matter what
return null;
}
}
}
}

Answer 1

importar {AbstractControl, FormBuilder, FormGroup, Validators} desde

configure la entrada de su contraseña en el grupo y no necesita usar "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">La confirmación de contraseña no puede estar vacía</p>
<p class="help-block" *ngIf="signUpForm.get(''confirmedPassword'').hasError(''passwordMismatch'') && signUpForm.get(''confirmedPassword'').touched">Las contraseñas no coinciden</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>

Answer 2

Cuando está creando el validador, pasa los valores de password y password confirmedPassword , pero los cambios en esos valores no se reflejarán en el validador.

Las dos opciones que veo son:

1. defina su validador en FormGroup y busque los valores de los dos controles que desea comparar; o
2. this.password ya está vinculado a this , use this.password y this.confirmedPassword en su validador.

Answer 3

El problema es que está mezclando el módulo de formas reactivas con el enfoque de entrada . Esto está causando que se undefined al pasar los valores al validador.

No es necesario vincularse al ng-model cuando se usan 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 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 un campo FormControl como parámetro y compara el valor del campo con el valor del campo Password del grupo de Credentials FormGroup .

En el HTML asegúrese de eliminar 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!

Answer 4

Haría lo mismo que Shailesh Ladumor pero agregando la siguiente línea antes de regresar en la función de validación:

c.get(''confirm_password'').setErrors({''noMatch'': true});

Para que la función de validación se vea así:

passwordConfirming(c: AbstractControl): { invalid: boolean } {
if (c.get(''password'').value !== c.get(''confirm_password'').value) {
c.get(''confirm_password'').setErrors({''noMatch'': true});
return {invalid: true};
}
}

Esto no solo establecerá el agujero userForm como un grupo de formulario no válido, sino que también establecerá confirm_password como un control de formulario no válido.

Con esto podrás más tarde llamar la siguiente función en tu plantilla:

public getPasswordConfirmationErrorMessage() {
if (this.userForm.get(''confirm_password'').hasError(''required'')) {
return ''You must retype your password'';
} else if (this.userForm.get(''confirm_password'').hasError(''noMatch'')) {
return ''Passwords do not match'';
} else {
return '''';
}

}

Answer 5

Hay dos tipos de validadores: el validador FormGroup y el validador FormControl . Para verificar que dos contraseñas coinciden, 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>

El punto clave aquí es agregar el validador de FormGroup como el segundo parámetro al método de grupo.

Answer 6

Por favor actualice el código de FormGroup como abajo en Angular5

 this.signUpForm = new FormGroup({
''username'': new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
''email'': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(5)]),
''password'': new FormControl(null, [Validators.required]),
''confirmedPassword'': new FormControl(null, [Validators.required])
}, this.pwdMatchValidator);

Agregue la función pwdMatchValidator en su componente

pwdMatchValidator(frm: FormGroup) {
return frm.get(''password'').value === frm.get(''confirmedPassword'').value
? null : {''mismatch'': true};
}

Añadir mensaje de validación en su plantilla

<span *ngIf="confirmedPassword.errors || signUpForm .errors?.mismatch">
Password doesn''t match
</span>

Por favor encuentre el componente de trabajo del material angular a continuación.

Componente Templete Código password.component.html

 <form class="cahnge-pwd-form" (ngSubmit)="onSubmit()" name="passwordForm" [formGroup]="passwordForm" #formDir="ngForm">
<div fxLayout=''column''>
<mat-form-field>
<input matInput name="password" placeholder="Password" [type]="hide ? ''text'' : ''password''" formControlName="password" required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? ''visibility_off'' : ''visibility''}}</mat-icon>
<mat-error *ngIf="password.invalid && (password.dirty || password.touched || isSubmit)">
<span *ngIf="password.errors.required">
Please enter a Password.
</span>
<span *ngIf="password.errors.maxlength">
Please enter a Email no more than 16 characters.
</span>
<span *ngIf="password.errors.minlength">
Please enter a password at least 6 characters.
</span>
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput name="password" placeholder="Confirm Password" [type]="confirm_hide ? ''text'' : ''password''" formControlName="confirm_password"
required>
<mat-icon matSuffix (click)="confirm_hide = !confirm_hide">{{confirm_hide ? ''visibility_off'' : ''visibility''}}</mat-icon>
<mat-error *ngIf="(confirm_password.invalid && (confirm_password.dirty || confirm_password.touched || isSubmit) || passwordForm.errors?.mismatch)">
<span *ngIf="confirm_password.errors || passwordForm.errors?.mismatch">
Password doesn''t match
</span>
</mat-error>
</mat-form-field>
<div fxLayout=''row'' fxLayoutGap="10px">
<button type="submit" mat-raised-button color="primary">Submit</button>
<button type="button" (click)="formDir.resetForm(passwordForm)" mat-raised-button color="warn">Cancel</button>
</div>
</div>
</form>

Código del componente: password.component.ts

import { Component, OnInit, AfterViewInit } from ''@angular/core'';
import { FormControl, FormGroup, Validators, FormBuilder } from ''@angular/forms'';
import { ToastrService } from ''ngx-toastr'';
import { Router, ActivatedRoute, ParamMap } from ''@angular/router'';
import { PasswordService } from ''./password.service'';
import { PasswordValidation } from ''./confirm'';
@Component({
selector: ''app-password'',
templateUrl: ''./password.component.html'',
styleUrls: [''./password.component.css'']
})
export class PasswordComponent implements OnInit {
passwordForm: FormGroup;
isSubmit: boolean;
constructor(private router: Router, private passwordService: PasswordService, private toastrService: ToastrService, private route: ActivatedRoute) { }
ngOnInit() {
this.passwordForm = new FormGroup({
''password'': new FormControl('''', [
Validators.required,
Validators.minLength(6),
Validators.maxLength(16),
]),
''confirm_password'': new FormControl('''', [
Validators.required,
Validators.minLength(6),
Validators.maxLength(16),
]),
}, this.pwdMatchValidator);
}
pwdMatchValidator(frm: FormGroup) {
return frm.get(''password'').value === frm.get(''confirm_password'').value
? null : {''mismatch'': true};
}
get password() { return this.passwordForm.get(''password''); }
get confirm_password() { return this.passwordForm.get(''confirm_password''); }
onSubmit(formvalue):boolean {
this.isSubmit = true;
if (this.passwordForm.invalid) {
return false;
} else {
this.passwordService.updatePassword(this.passwordForm.value)
.subscribe((res) => {
if (res.status == ''success'') {
this.toastrService.success(res.msg);
this.router.navigate([''/change-password'']);
}
})
return true;
}
}
}

Answer 7

const form = new FormGroup({
password: new FormControl('''', Validators.minLength(2)),
passwordConfirm: new FormControl('''', Validators.minLength(2)),
}, passwordMatchValidator);
function passwordMatchValidator(g: FormGroup) {
return g.get(''password'').value === g.get(''passwordCenter code hereonfirm'').value
? null : {''mismatch'': true};
}

Debe crear un nuevo servicio y puede llamar al servicio creado mientras desea validar la contraseña y los campos de confirmación.