角度2确认密码 [英] password confirmation in angular 2

问题描述

我正在尝试检查这两个密码是否相等。我没有收到任何错误消息，但没有，但我没有收到错误消息密码必须匹配。

I am trying to check whether the two passwords are equal. I am not getting any error message when there are not but i am not getting the error message "Password must match".

以下是我的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>

关于我如何构建表单的我的Component类：

My Component class on how i am building my form:

   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})

我的密码匹配功能：

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 };        
}  

函数被调用，我也得到了返回值...但为什么我的确认密码输入控件没有显示错误或激活其span标记。

The function is getting called, i am also getting the return value... but why is my confirm password input control not showing error or activitating its span tag.

推荐答案

问题在于你的这些行模板：

The issue is with these lines in your template:

formName.get（'confirmpassword'）。hasError（'mismatchedPasswords'）

您正在将验证器应用于 formName 组，但检查确认密码确认密码 code> formControl。

You're applying the validator to the group formName, but checking for the error on the confirmpassword formControl.

尝试在模板中检查 mismatchedPasswords 的两个地方使用此功能。

Try using this in the two places where you check for mismatchedPasswords in your template.

formName.hasError（'mismatchedPasswords'）

这篇关于角度2确认密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！