时间戳

首页 > 解决方案 > 使用 Angular 对 confirmPassword 进行自定义验证

angular - 使用 Angular 对 confirmPassword 进行自定义验证

问题描述

我想在我的角度/离子应用程序中建立一个寄存器。在我的注册中，formGroup 中有 6 个字段（用户名、名字、姓氏、密码、确认密码、性别）。在我将数据发送到我的服务器之前，我想通过角度验证在客户端上对其进行验证。除了 confirmPassword 之外，每个验证都适用。我做了几个教程并阅读了几篇文章，但没有一个代码能解决我的问题。

希望，你们中的一个可以帮助我..

this.formRegister = formBuilder.group({
      username: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern('^(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$')]), UsernameValidator.checkUsername ],
      firstname: ['', Validators.compose([Validators.minLength(3), Validators.pattern('[a-zA-Z ]*')])],
      lastname: ['', Validators.compose([Validators.minLength(3), Validators.pattern('[a-zA-Z ]*')])],
      rPassword: ['', Validators.compose([Validators.required, Validators.pattern('^(?=.*)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$')])],
      cPassword: ['', Validators.compose([Validators.required]), (control => PasswordValidator.confirmPassword(control, this.formRegister, 'rPassword'))],
      sex: ['']
},
{
      updateOn: "blur"
})

如您所见，我希望在字段失去焦点时触发验证

我当前的 customPasswordValidation：

static confirmPassword(control: FormControl, group: FormGroup, matchPassword: string) {
    
    return new Promise(resolve => {
        
        if (!control.value || group.controls[matchPassword].value !== null || group.controls[matchPassword].value === control.value) {
            resolve(null)
        }
        
        resolve({ 'mismatch': true })
    })
}

标签： angularionic-framework

解决方案

我发现了我的问题..我使用了“或”而不是“和”

如果您有同样的问题，您可以像这样构建您的自定义验证：

import { FormControl, FormGroup } from '@angular/forms';

export class PasswordValidator {

    static confirmPassword(control: FormControl, group: FormGroup, matchPassword: string) {
        
        return new Promise(resolve => {
            
            if (!control.value && group.controls[matchPassword].value !== null || group.controls[matchPassword].value === control.value) {
                group.controls['cPassword'].setErrors(null)
                resolve(null)
            } else {
                group.controls['cPassword'].setErrors({ 'mustMatch': true })
                if (matchPassword == 'rPassword') {
                    resolve({ 'mustMatch': true })
                } else {
                    resolve(null)
                }
            }
        })
    }
}

通过此验证，如果您更改密码或确认密码字段，将检查密码是否匹配。
不要忘记像这样在密码字段和确认密码字段上调用您的验证

rPassword: ['', Validators.compose([Validators.required, Validators.pattern('^(?=.*)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$')]), (control => PasswordValidator.confirmPassword(control, this.formRegister, 'cPassword'))],
cPassword: ['', Validators.compose([Validators.required]), (control => PasswordValidator.confirmPassword(control, this.formRegister, 'rPassword'))],

在您的 html 文件中，您可以像这样读出错误：

<div *ngIf="formRegister.controls.cPassword.errors?.mustMatch && formRegister.controls.cPassword.dirty">
    Passwords must match!
</div>

在这种情况下，如果您将字段聚焦一次并触发验证，则会显示错误

推荐阅读