时间戳

首页 > 解决方案 > 反应式表单确认密码和确认电子邮件验证器角度 4

angular - 反应式表单确认密码和确认电子邮件验证器角度 4

问题描述

我需要使用反应形式 Angular 4+ 检查密码和确认密码字段是否具有相同的值。我确实在这里看到了很多相同的答案，Angular 4 表单验证重复密码，将验证器中的字段与 Angular 4 进行比较，但似乎没有一个对我有用。

面临的问题，如何在响应式方法中结合确认电子邮件和确认密码验证器。

确认电子邮件或确认密码都可以正常工作。

this.addEmpForm = new FormGroup({
    'name': new FormControl(null, Validators.required),
    'email': new FormControl(null, [Validators.required, Validators.email]),
    'cemail': new FormControl(null, [Validators.required, Validators.email]),
    'password': new FormControl(null, Validators.required),
    'cpassword': new FormControl(null, Validators.required)
}, this.pwdMatchValidator);

emailMatchValidator(frm: FormGroup) {
  return frm.get('password').value === frm.get('cpassword').value
    ? null : { 'mismatch': true };
}
    
pwdMatchValidator(frm: FormGroup) {
  return frm.get('password').value === frm.get('cpassword').value
    ? null : { 'mismatch': true };
}

HTML

<span class="help-block"
  *ngIf="addEmpForm.get('cemail').touched && cemail?.errors
  || addEmpForm.get('cemail').touched
  && addEmpForm.errors?.mismatch">
    Email doesn't match
</span>

标签： angularangular6angular-formsangular4-forms

解决方案

组件 TS

password: [
    '',
    [Validators.required, Validators.maxLength(50)]
],
confirmPassword: [
    '',
    [
        Validators.required,
        PasswordValidator('password'),
        Validators.maxLength(50)
    ]
],
emailAddress: [
    '',
    [Validators.required, Validators.email, Validators.maxLength(50)]
],
confirmEmailAddress: [
    '',
    [
        Validators.required,
        Validators.email,
        EmailValidator('emailAddress'),
        Validators.maxLength(50)
    ]
]

电子邮件验证器

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

export function EmailValidator(confirmEmailInput: string) {
  let confirmEmailControl: FormControl;
  let emailControl: FormControl;
  
  return (control: FormControl) => {
    if (!control.parent) {
      return null;
    }
  
    if (!confirmEmailControl) {
      confirmEmailControl = control;
      emailControl = control.parent.get(confirmEmailInput) as FormControl;
      emailControl.valueChanges.subscribe(() => {
        confirmEmailControl.updateValueAndValidity();
      });
    }

    if (emailControl.value.toLocaleLowerCase() !==
        confirmEmailControl.value.toLocaleLowerCase()
    ) {
      return { notMatch: true };
    }

    return null;
  };
}

密码验证器

import { FormControl } from '@angular/forms';
   
export function PasswordValidator(confirmPasswordInput: string) {
  let confirmPasswordControl: FormControl;
  let passwordControl: FormControl;
  
  return (control: FormControl) => {
    if (!control.parent) {
      return null;
    }
  
    if (!confirmPasswordControl) {
      confirmPasswordControl = control;
      passwordControl = control.parent.get(confirmPasswordInput) as FormControl;
      passwordControl.valueChanges.subscribe(() => {
        confirmPasswordControl.updateValueAndValidity();
      });
    }

    if (passwordControl.value !== confirmPasswordControl.value) {
      return { notMatch: true };
    }

    return null;
  };
}

您必须将验证器导入到您的 component.ts 文件中

推荐阅读