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

Question

我需要使用反应式 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> 

Answer 1

组件 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 文件中