2

I developed a login component using the Angular-8 reactive form concept. I have asynchronous validations like empty fields, invalid emails. these validations should be asynchronous. But I have two custom validators like is-user-exist, is-password-match-user. These two validators should be only validated if user clicks submit. How to have a reactive form validator to check these two validators alone on submitting and other validations asynchronously.

2

1 Answer 1

4

You can control for a form (or single form elements) when the value or the validity is updated. This feature has been available in AngularJS 1.x but missed in Angular 2+ from some time. Starting from some version (Angular 5 I think) can be one of:

  • change: change is the default mode. By using this update option the form / form control is updated after every single change.
  • blur: the blur change mode is only updated the from values / validity status after a form control lost the focus.
  • submit: updates are only done after form submit.

In reactive forms this can be done with the setting updateOn of either form or form control. Sample code:

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'change'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit' // <--
  })
});
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.