Валидатор пользовательской формы Angular

Question

Я знаю, что этот вопрос задавали много раз, но я все еще не могу понять, как заставить его работать ... Я теряю веру, вы не могли бы помочь?

Пытаюсь сделать простая проверка пароля "подтверждения" в моей форме регистрации:

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

тогда мой html файл вполне базовый c:

прим. html

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

Answer 1

Ваша проблема в том, что вы не нацелены на оба поля паролей с помощью своего валидатора. Вы можете установить один для обоих, установив другой formGroup следующим образом:

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

Затем вы можете сделать следующую функцию валидатора (с некоторым рефакторингом, удалив оба параметра):

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

Затем в вашем HTML вы можете выполнить рефакторинг своего условия следующим образом:

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

Обратите внимание, что вы можете получить вложенное свойство formControl следующим образом: password.passwordConfirmInputControl.

Вот рабочий пример с вашим кодом .