Passwort Bestätigung in Winkel 2

Question

Ich versuche zu überprüfen, ob die beiden Passwörter gleich sind. Ich bekomme keine Fehlermeldung, wenn nicht, aber ich bekomme keine Fehlermeldung "Passwort muss übereinstimmen".

Unten ist mein DOM:

<div class="form-group" [ngClass]="{'has-error': formName.get('password').touched && 
       formName.get('password').hasError('invalidPassword')}"> 
    <label class="control-label">Password</label> 
    <input type="text" class="form-control" formControlName="password" name="password" required /> 
</div> 

<div class="form-group" [ngClass]="{'has-error': formName.get('confirmpassword').touched 
     && formName.get('confirmpassword').hasError('mismatchedPasswords')}"> 
    <label class="control-label">confirm password</label> 
    <input type="text" class="form-control" formControlName="confirmpassword" name="confirmpassword" required /> 
    <span class="help-block" *ngIf="formName.get('confirmpassword').touched 
      && formName.get('confirmpassword').hasError('mismatchedPasswords')"> 
      Password must match 
     </span> 
</div> 

Meine Component-Klasse auf, wie ich meine Form bin Gebäude:

this.formName = this.fb.group({ 
     name: ["", [Validators.required]],    
     password: ["",[Validators.required, ValidationHelper.passwordValidator]], 
     confirmpassword: ["",Validators.required], 
     info: this.fb.group({ 
      acc: ["",[Validators.required, ValidationHelper.creditCardValidator]] 
     }) 
    },{ validator: ValidationHelper.matchPass}) 

Und Funktion Passwort Matching:

static matchPass = (control: AbstractControl) : {[key: string]: boolean} => {  
    let password = control.get('password'); 
    let confirmPassword = control.get('confirmpassword'); 
    return password.value === confirmPassword.value ? null : { 'mismatchedPasswords': true };   
} 

Die Funktion ist ruft, ich bekomme auch den Rückgabewert ... aber warum ist meine Bestätigung Passworteingabe Kontrolle nicht Fehler oder a ctivitating sein span-Tag.

Answer 1

Die Frage ist, mit diesen Zeilen in der Vorlage:

formName.get('confirmpassword').hasError('mismatchedPasswords')

Sie den Validator zur Gruppe Anwendung formName, aber auf der confirmpassword Formcontrol für die Fehlerprüfung.

Verwenden Sie dies an den beiden Stellen, an denen Sie in Ihrer Vorlage für mismatchedPasswords überprüfen.

formName.hasError('mismatchedPasswords')