自定义表单验证器 Angular

Question

I know this question has been asked a bunch of times, but I still can't figure out how to make it work... I'm losing faith, can you help?

Trying to make a simple "confirm" password validation on my signup form:

app.ts

   this.signupForm = this.formBuilder.group({
      emailInputControl: new FormControl(null, {
        updateOn: "blur",
        validators: [
          Validators.required,
          Validators.email,
          Validators.pattern("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"),
        ],
      }),
      passwordInputControl: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required, Validators.minLength(8)],
      }),
      passwordConfirmInputControl: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required],
      }),
      validator: this.checkPassword(
        "passwordInputControl",
        "passwordConfirmInputControl"
      ),
    });

private checkPassword(password: string, passwordConfirm: string) {
    return (formGroup: FormGroup) => {
      const passwordInput = formGroup.controls[password];
      const passwordConfirmationInput = formGroup.controls[passwordConfirm];

      if (passwordInput.value !== passwordConfirmationInput.value) {
        return passwordConfirmationInput.setErrors({ passwordMismatch: true });
      } else {
        return passwordConfirmationInput.setErrors(null);
      }
    };
  }

then, my html file is quite basic:

app.html

<div *ngIf="signupForm.hasError('passwordMismatch') && signupForm.get('passwordConfirmInputControl').touched">
              <p>
                Pwd don't match
              </p>
            </div>

Answer 1

Your issue is that you're not targeting the both passwords fields with your validator. You can set one for both by setting another formGroup like that:

    this.signupForm = this.fb.group({
      emailInputControl: new FormControl(null, {
        validators: [
          Validators.required,
          Validators.email,
          Validators.pattern("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$")
        ]
      }),
      password: this.fb.group(
        {
          passwordInputControl: new FormControl(null, {
            validators: [Validators.required, Validators.minLength(8)]
          }),
          passwordConfirmInputControl: new FormControl(null, {
            validators: [Validators.required]
          })
        },
        {
          validator: this.checkPassword
        }
      )
    });

Then you can make the following validator function (with some refactoring by removing both parameters):

  private checkPassword(fg: FormGroup) {
    const pwd1 = fg.get("passwordInputControl");
    const pwd2 = fg.get("passwordConfirmInputControl");
    
    console.log("fg", fg);
    return pwd1.value === pwd2.value ? null : { passwordMismatch: { value: pwd2.value } };
  }

Then in your HTML, you can refactor your condition like that:

<div *ngIf="signupForm.get('password').hasError('passwordMismatch') && signupForm.get('password.passwordConfirmInputControl').touched">
    <p>
        Pwd don't match
    </p>
</div>

Note you can retrieve a nested formControl property like this: password.passwordConfirmInputControl .

Here's a working example with your code .