Validateur personnalisé sur la forme réactive de mot de passe et confirmer le mot de passe correspond à l'obtention de paramètres non définis dans Angulaire 4
Je suis en train de mettre en œuvre un validateur personnalisé pour vérifier si le mot de passe et confirmation du mot de passe sont égaux. Le problème est que le validateur est arriver pas défini de mot de passe et confirmedPassword paramètres. Comment puis-je faire ce travail. La fonction fonctionne parce que si je change la condition d' === au lieu de !== il envoyait le message d'erreur correctement lorsque les champs sont les mêmes. Personne ne sait qui est l'erreur ici?
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>
de l'inscription.composante.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);
}
}
}
personnalisé-validateurs.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;
}
}
}
}
OriginalL'auteur Juan | 2017-06-09
Vous devez vous connecter pour publier un commentaire.
définir votre mot de passe d'entrée dans le groupe et pas besoin d'utiliser "ngModel".
j'ai ajouté la dernière erreur d'affichage. merci
ouais, merci. J'ai juste fait quelque chose de différent cause qui montre l'erreur tout de suite, même si ng-touch n'est pas présent sur la confirmation du mot de passe. J'ai juste fait ce
<p class="help-block" *ngIf="signUpForm.get('passwords').hasError('passwordMismatch') && signUpForm.get('passwords.confirmedPassword').touched">Passes don't match</p>
et pour la couleur de la confirmer champ mot de passe avec le rouge, j'ai ajouté un [ngClass]="getPasswordConfirmValidityClass()" et sur le composant.ts
//lighten up the input for confirm password when it's not equal to password getPasswordConfirmValidityClass() { const confirmedPasswordClass = this.signUpForm.get('passwords.password').touched && this.signUpForm.get('passwords.confirmedPassword').touched && this.signUpForm.get('passwords').hasError('passwordMismatch') ? 'error-border' : null; return confirmedPasswordClass; }
OriginalL'auteur Shailesh Ladumor
Le problème, c'est que vous êtes mélangeant les formes réactives de module avec l'approche. C'est ce qui vous obtenez
undefined
lors du passage de la valeurs pour le validateur.Vous n'avez pas besoin de se lier à la
ng-model
lors de l'utilisation de l'formes réactives. Au lieu de cela, vous devez accéder à la valeur des champs à partir de l'Instance deFormGroup
.- Je faire quelque chose comme cela dans une application afin de valider les mots de passe correspondent.
Noter que le validateur s'attend à un
FormControl
champ en tant que paramètre et il compare la valeur du champ à celle de la valeur de laPassword
domaine de laCredentials
FormGroup
.Dans le
HTML
assurez-vous de supprimer leng-model
.Espérons que cette aide!
OriginalL'auteur Daniel Ormeño
Veuillez mettre à jour FormGroup code comme ci-dessous dans Angular5
Ajouter
pwdMatchValidator
fonction de votre composantAjouter un message de validation de votre modèle
Veuillez trouver ci-dessous angulaire du matériel de travail de la composante.
Composant Templete Code
password.component.html
Code De Composant :
password.component.ts
Amusez-Vous Bien!.
OriginalL'auteur Raja Rama Mohan Thavalam
Il existe deux types de validateurs: FormGroup validateur et FormControl validateur. Pour vérifier les deux mots de passe correspondent, vous devez ajouter un FormGroup validateur. Ci-dessous mon exemple:
Remarque: cette.fb est injecté FormBuilder
et dans le templeate:
La point clé ici est d'ajouter la FormGroup validateur comme le deuxième paramètre à la méthode du groupe.
OriginalL'auteur Yang Zhang
Lorsque vous êtes en train de créer le validateur, vous êtes de passage dans les valeurs de
password
etconfirmedPassword
, mais les changements dans ces valeurs ne seront pas reflétées dans le programme de validation.Les deux options que je vois sont:
FormGroup
, et de rechercher les valeurs des deux contrôles que vous souhaitez comparer; outhis
déjà, l'utilisationthis.password
etthis.confirmedPassword
dans votre programme de validation.OriginalL'auteur Robby Cornelissen
Je voudrais faire la même chose que Shailesh Ladumor mais en ajoutant la ligne suivante avant de retourner dans la fonction de validation:
De sorte que la fonction de validation ressemble à ceci:
Cela permettra non seulement de définir le trou
userForm
comme une forme inadmissible groupe, mais il sera également mis enconfirm_password
comme invalide au contrôle de formulaire.Avec cela, vous pouvez ensuite appeler la fonction suivante dans votre template:
}
OriginalL'auteur Bernardo Mondragón Brozon
Avoir à créer un nouveau service et vous pouvez appeler le service créé, alors que vous souhaitez valider le mot de passe et la confirmation des champs.
OriginalL'auteur Hamid Afghan