Transmettre la nouvelle valeur de mot de passe à validator.ts dans Angular 4

Question

Je suis en train de relever les défis pour un cours d'Udemy sur Angular 4, mais je suis coincé sur un challenge où je dois créer une entrée pour un nouveau mot de passe puis une autre entrée pour confirmer le nouveau mot de passe en utilisant des formulaires réactifs.

J'ai un fichier .ts externe appelé password.validators.ts qui a un code de validation de formulaire personnalisé, et je peux obtenir la valeur de la boîte de saisie actuellement sélectionnée en passant un objet de contrôle avec AbstractControl, mais comment passer un valeur à mon fichier component.ts et puis de mon component.ts à mon password.validators.ts? Je dois pouvoir comparer la nouvelle valeur de mot de passe à la valeur de mot de passe de confirmation et je suis coincé!

nouveau-password.component.html

<form [formGroup]="form"> 
    <div class="form-group"> 
     <label for="oldPassword">Old Password</label> 
     <input 
     formControlName="oldPassword" 
      id="oldPassword" 
      type="text" 
      class="form-control"> 
      <div *ngIf="oldPassword.pending">Checking password...</div> 
      <div *ngIf="oldPassword.touched && oldPassword.invalid" class="alert alert-danger"> 
       <div *ngIf="oldPassword.errors.required">Old password is required</div> 
       <div *ngIf="oldPassword.errors.checkOldPassword">Password is incorrect</div> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="newPassword">New password</label> 
     <input 
     formControlName="newPassword" 
      id="newPassword" 
      type="text" 
      class="form-control"> 
      <div *ngIf="newPassword.touched && newPassword.invalid" class="alert alert-danger"> 
       <div *ngIf="newPassword.errors.required">New password is required</div> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="confirmNewPassword">Confirm new password</label> 
     <input 
     formControlName="confirmNewPassword" 
      id="confirmNewPassword" 
      type="text" 
      class="form-control"> 
      <div *ngIf="confirmNewPassword.touched && confirmNewPassword.invalid" class="alert alert-danger"> 
       <div *ngIf="confirmNewPassword.errors.required">Confirm password is required</div> 
       <div *ngIf="confirmNewPassword.errors.confirmNewPassword">Passwords don't match</div> 
      </div> 
    </div> 
    <button class="btn btn-primary" type="submit">Change Password</button> 
</form> 

new-password.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 
import { PasswordValidators } from './password.validators'; 

@Component({ 
    selector: 'new-password', 
    templateUrl: './new-password.component.html', 
    styleUrls: ['./new-password.component.css'] 
}) 
export class NewPasswordComponent { 
    form = new FormGroup({ 
    oldPassword: new FormControl('', Validators.required, PasswordValidators.checkOldPassword), 
    newPassword: new FormControl('', Validators.required), 
    confirmNewPassword: new FormControl('', Validators.required) 
    }) 

    get oldPassword() { 
    return this.form.get('oldPassword'); 
    } 

    get newPassword() { 
    return this.form.get('newPassword'); 
    } 

    get confirmNewPassword() { 
    return this.form.get('confirmNewPassword'); 
    } 

    addNewPassword(newPassword: HTMLInputElement) { 
    let np = this.newPassword; 
    return np; 
    } 

} 

password.validators.ts

import { AbstractControl, ValidationErrors } from '@angular/forms'; 

export class PasswordValidators { 


    static checkOldPassword(control: AbstractControl) : Promise<ValidationErrors | null> { 
    return new Promise((resolve, reject) => { 
     setTimeout(() => { 
      if(control.value !== '1234') 
      resolve({ checkOldPassword: true }) ; 
      else resolve(null); 
     }, 2000); 
    }); 
    } 

    static confirmNewPassword(control: AbstractControl) : ValidationErrors | null { 
      if(control.value === control.newPassword.value) 
      return null; 
    } 

} 

Answer 1

J'ai utilisé le code suivant pour ma validation de mot de passe peut être cela peut vous aider En password.validator écrire ce code

import {AbstractControl} from '@angular/forms'; 

classe export PasswordValidation {

static MatchPassword(AC: AbstractControl) { 
    let password = AC.get('password').value; 
    let confirmPassword = AC.get('confirmPassword').value; 
    if(password != confirmPassword) { 
     console.log('false'); 
     AC.get('confirmPassword').setErrors({MatchPassword: true}) 
    } else { 
     console.log('true'); 
     return null 
    } 
} 

}

et le fichier du composant utilise ce code

constructor(fb: FormBuilder) 
    { 
    this.form = fb.group({ 
     password: ['', Validators.required], 
     confirmPassword: ['', Validators.required] 
    }, { 
     validator: PasswordValidation.MatchPassword // your validation method 
    }) 
    } 

et dans le fichier html pour trouver l'utilisation d'erreur ce code

<div class="alert alert-danger" *ngIf="form.controls.confirmPassword.errors?.MutchPassword">Password not match</div> 

espère que cela vous aidera