微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-角度2中的密码确认

我正在尝试检查两个密码是否相等.如果没有,我没有收到任何错误消息,但没有收到“密码必须匹配”的错误消息.

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

   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标签.

解决方法:

问题出在模板中的这些行:

formName.get(‘confirmpassword’).hasError(‘mismatchedPasswords’)

您正在将验证器应用于组formName,但是在确认密码formControl上检查错误.

尝试在检查模板中不匹配的密码的两个地方使用它.

formName.hasError(‘mismatchedPasswords’)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐