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

我想在我的angular/ionic应用程序中建立一个寄存器。在我的注册表中，formGroup中有6个字段（用户名、名字、姓氏、密码、确认密码、性别）。在将数据发送到服务器之前，我想在客户端使用anuglar验证对其进行验证。除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"
})

---

我解决了我的问题。。我用了“or”而不是“and”

如果您有相同的问题，可以按如下方式构建自定义验证：

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

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

通过此验证，如果您更改密码或confirmPassword字段，将检查密码是否匹配。
别忘了像这样调用密码字段和confirmPassword字段的验证

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文件中，您可以读取如下错误：

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

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

密码必须匹配！

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