Reactive Form确认密码并确认Email Validator angular 4-Java 学习之路

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

1 回答

COMPONENT 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)
        ]
    ]

EMAIL VALIDATOR

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

PASSWORD VALIDATOR

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

回复于 2024-04-17T02:46:04+08:00

Reactive Form确认密码并确认Email Validator angular 4

1 回答

相关问题