CODEWITHSUNDEEP
validationangularangular2-formbuilder
ForestG
ForestG

Reputation: 18105

Angular 2 force custom validation on keyup

I have this code:

this.form = fb.group({
        username: ['', Validators.compose([Validators.required])],
        fullName: ['', Validators.compose([Validators.required])],
        password: ['', Validators.compose([Validators.required])],
        confirmPassword: ['', Validators.required],
    }, {validator: matchingPasswords('password', 'confirmPassword')});

matchingPasswords:

export function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
return (group: FormGroup) => {
    let password = group.controls[passwordKey];
    let passwordConfirmation = group.controls[passwordConfirmationKey];
    if (password.value !== passwordConfirmation.value) {
        return passwordConfirmation.setErrors({mismatchedPasswords: true})
    }
}

}

html:

<div class="form-group">
        <input [formControl]="confirmPassword" class="form-control checking-field" type="password">
        <span class="help-block text-danger" *ngIf="form.get('password').touched && form.get('password').hasError('required')">
</div>
<div class="form-group">
        <input class="custom-control-input checkbox-main" type="checkbox" [(ngModel)]="policyButtonValue" [ngModelOptions]="{standalone: true}" ngDefaultControl>
        <span class="custom-control-indicator"></span>
</div>

this is functional, and works perfectly, but I have a special use-case scenario that should be fixed.

  1. click in the first password field.
  2. fill up a password, eg.: "foo"
  3. click in the confirm password field.
  4. tpye in the same thing, eg.:"foo" enter image description here till this point, no problems.
  5. type something different into the confirm password field, eg: "foobar" (at this point, the validator shows that there is an error here) enter image description here
  6. click in the password field
  7. type in the same thing that is in the password field: "foobar" and here, the confirm password field is still invalid, until the password field looses focus... enter image description here is there a way, to force the matchingPassword validation run on keyup event, rather than how it works now?

Upvotes: 7

Views: 6322

Answers (1)

Michael Kang
Michael Kang

Reputation: 52847

You need an else block: 

if (password.value !== passwordConfirmation.value) {
    passwordConfirmation.setErrors({mismatchedPasswords: true})
}
else {
    passwordConfirmation.setErrors(null);
}

Upvotes: 5

Related Questions