mot de passe et confirmation du mot de passe validation des champs formulaires réactifs angular2

le mieux serait d'avoir un groupe imbriqué dans le groupe de formulaires, où nous avons un validateur personnalisé vérifiant le groupe de formulaires avec password et confirmPass, donc quand l'un ou l'autre des Champs est modifié, le validateur est déclenché, car auparavant il ne démarre que lorsque confirmPass champ est modifié.

alors faites quelque chose comme ça dans le groupe de formulaires externe:

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

et puis le validateur pourrait ressembler à ceci:

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPass = group.get('confirmPass').value;

  return pass === confirmPass ? null : { notSame: true }     
}

L'affichage de l'erreur de validation pourrait alors fait comme ceci:

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

bien sûr, vous n'avez pas besoin d'avoir un groupe imbriqué, mais il est préférable de ne pas avoir le feu du validateur personnalisé chaque fois que des changements se produisent dans le formulaire. De cette façon, il est seulement allumé quand des changements arrivent à ce groupe de forme interne.

si vous voulez le faire de cette façon, vous devez lier la fonction au contexte actuel "ceci". Passer au-dessus de this.validatePasswordConfirmation.bind(this) mais notez que cette fonction passera le FormControl pour la confirmation, et non le FormGroup comme vous l'avez indiqué dans la signature de la fonction.

j'ai fait une approche différente qui fonctionnera pour n'importe quel contrôle. J'ai d'abord définir les contrôles de base de la forme:

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

Puis-je créer un nouveau contrôle pour confirmer la valeur avec mon validateur personnalisé:

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

    this.myForm.addControl('confirmPassword', confirmPasswordControl);

le code de la sameValueAs validator est comme suit, vous pouvez le définir sur un fichier separte à utiliser partout

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 vous ne voulez pas passer par un validateur personnalisé, vous pouvez simplement créer un champ d'entrée qui est autonome et qui ne sera donc pas calculé dans votre formGroup mais plutôt par ngModel

<input type="password" matInput [(ngModel)]="passwordConfirm" [ngModelOptions]="{standalone: true}">

alors dans votre ts vous pouvez juste valider et jeter l'erreur ou invalider le formulaire si vous voulez. Juste trouvé ça un peu rapide et pratique:

/ / Vérifier Que Les Mots De Passe Correspondent

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