Angular not entering custom form validation

Question

I'm trying to create a password match validation in a register form, but Angular never enters the custom validation, and I cannot seem to figure out why. The form is as follows.

this.userSettingsForm = this.fb.group({
  username: [
    '',
    [
      Validators.required,
      Validators.minLength(4)
    ]
  ],
  password: [''],
  password_confirm: ['']
},
{
  Validator: this.passwordMatchValidator
});

The validation function is the following;

passwordMatchValidator() {
  const password = this.userSettingsForm.get('password').value;
  const confirmPassword = this.userSettingsForm.get('password_confirm').value;

  if(password.errors && !confirmPassword.errors.passwordMatchValidator) {
    return;
  }

  if(password !== confirmPassword) {
    confirmPassword.setErrors({ notSame: true});
  }
  else {
    confirmPassword.setErrors(null);
  }
}

Using the following to display errors

<ng-container *ngIf="userSettingsForm.controls.password_confirm.errors">
  {{ userSettingsForm.controls.password_confirm.errors.message }}
</ng-container>

But the form always submits as valid. What do I miss?

AVJT82 · Accepted Answer · 2021-05-08 18:10:47Z

2

First of all, you are using Validator instead of validators where you are declaring your custom validator in the form.

Then we need to properly call the validation function, also I suggest you actually put the error on the form group itself, but that is perhaps just a preference. Anyway, I suggest the following:

constructor(private fb: FormBuilder) {
  this.userSettingsForm = this.fb.group(
    {
      password: ['', Validators.required],
      password_confirm: ['', Validators.required]
    },
    { validators: this.passwordMatchValidator() } // should be "validators"
  );
}

and the validator I suggest this:

passwordMatchValidator(): ValidatorFn {
  return (form: AbstractControl): ValidationErrors | null => {
    const password = form.get('password').value;
    const confirmPassword = form.get('password_confirm').value;
    return password === confirmPassword ? null : { notSame: true };
  };
}

Then you can display the error with userSettingsForm.hasError('notSame')

A DEMO for reference.

edited May 8, 2021 at 18:10

answered May 8, 2021 at 18:05

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

S_NoBEl Over a year ago

I made these changes. But it still does not fix the issue! The form is always passed as valid on submitting.

AVJT82 Over a year ago

Then please provide a minimal reproducible example, you can make a stackblitz that shows your issue, as we can see in the stackblitz that this code works. So the issue must be somewhere in your code.

S_NoBEl Over a year ago

Your stackblitz has the same issue. Form is still considered valid and submittable. Only difference to my code is that the button contains [disabled]="!userSettingsForm.valid"

AVJT82 Over a year ago

Well I added to the button that it is disabled if the form is not valid. Was that your issue? Disabling the button?

AVJT82 Over a year ago

You can now see that you cannot submit the form when the form is invalid.

|

Collectives™ on Stack Overflow

Angular not entering custom form validation

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related