Angular custom validation

Question

I have the registration form with the password and confirm_password fields. And I have the custom validation to check that these passwords are the same. The thing is: when I'm typing 'qwerty123' in the password field and qwerty123 in the password_confirm field everything is fine. But if I then add some char, for example, 4 in the confirm_password field and then add the same char 4 to the password field my form won't be valid (property valid is false) and I can not do anything with it.

I looked at the similar solution here, but the things that were helpful there are not helpful for me.

My component:

  public userNameInput: FormControl = new FormControl('', [
    Validators.minLength(this.limits['username'][0]),
    Validators.maxLength(this.limits['username'][1])
  ]);
  public emailInput: FormControl = new FormControl('', [
    Validators.required,
    RegisterFormComponent.checkEmail
  ]);
  public passwordInput: FormControl = new FormControl('', [
    Validators.required,
    Validators.minLength(this.limits['password'][0]),
    Validators.maxLength(this.limits['password'][1]),
    RegisterFormComponent.checkPasswordsMatching
  ]);
  public confirmPasswordInput: FormControl = new FormControl('', [
    Validators.required,
    RegisterFormComponent.checkPasswordsMatching
  ]);

  public registrationForm: FormGroup = this.formBuilder.group({
    userName: this.userNameInput,
    email: this.emailInput,
    password: this.passwordInput,
    confirmPassword: this.confirmPasswordInput
  });

  private static checkPasswordsMatching(input: FormControl): null | { [ key: string ]: boolean } {
    if (!input.root || !input.root.get('password')) {
      return null;
    }

    return (
      (
        input.root.get('password').value === '' ||
        input.root.get('confirmPassword').value === ''
      )
      ||
      input.root.get('password').value === 
      input.root.get('confirmPassword').value
    )
      ? null
      : { mismatched: true };
  }

My HTML from the template:

<input
  type="text"
  name="username"
  id="username"
  [formControl]="userNameInput"
  [class.error]="
    userNameInput.hasError('minlength') || 
    userNameInput.hasError('maxlength')
  "
>
<input
  id="email"
  type="text"
  name="email"
  [formControl]="emailInput"
  [class.error]="
    !emailInput.pristine &&
     emailInput.hasError('invalid')
  "
>
<input
  type="password"
  name="password"
  id="password"
  [formControl]="passwordInput"
  [class.error]="
    passwordInput.hasError('minlength') ||
    passwordInput.hasError('maxlength') ||
    confirmPasswordInput.hasError('mismatched')
  "
>
<input
  type="password"
  name="password_confirm"
  id="password_confirm"
  [formControl]="confirmPasswordInput"
  [class.error]="
    passwordInput.hasError('mismatched') ||
    confirmPasswordInput.hasError('mismatched')
  "
>
<button
    [disabled]="!registrationForm.valid"
>Confirm</button>

did you check which error are you getting? might be that the 'password' field is just too long? cause you have validation for max length there, but not for 'confirmPasswordInput' — Ludevik
– Ludevik, Commented Jul 31, 2017 at 9:09
Nope, it's the 'mismatched' error, it's not about the length for sure. — WeekendMan
– WeekendMan, Commented Jul 31, 2017 at 9:15

Ludevik · Accepted Answer · 2017-07-31 10:55:35Z

1

That's because angular doesn't rerun validators on other input, just on the one user is currently typing in. You can rerun validators on the other input with updateValueAndValidity.

answered Jul 31, 2017 at 10:55

Ludevik

7,3041 gold badge44 silver badges62 bronze badges

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

1 Comment

WeekendMan Over a year ago

Yes, I found out the whole picture. 1. As you said, Angular doesn't update the validators, I need to do it manually (but sometimes it does, don't know why). 2. Important - I need to use FormGroup to group my 2 password inputs and set the matching validator to this group. This passwords group should be the group of the main form FormGroup. More details I found here, it was helpful: bertrandg.github.io/angular2-forms-form-group-validation Good luck to everyone who will get the same issue.

Collectives™ on Stack Overflow

Angular custom validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related