question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reactive form async validation fires on change when updateOn: 'submit'

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/forms@9.1.5

Is this a regression?

Don't know

Description

Async validation for FormGroup fires on every input change event when updateOn: 'submit' is set.

πŸ”¬ Minimal Reproduction

Grab the example form validation from docs (https://angular.io/guide/form-validation) and change Reactive form declaration like this

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, {
    validators: [Validators.required, Validators.minLength(4), forbiddenNameValidator(/bob/i)],
    updateOn: 'change'
  }),
  'alterEgo': new FormControl(this.hero.alterEgo, {
    validators: [Validators.required],
    updateOn: 'change'
  }),
  'power': new FormControl(this.hero.power, {
    validators: [Validators.required],
    updateOn: 'change'
  })
}, {
  validators: identityRevealedValidator,
  asyncValidators:  [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
  updateOn: 'submit'
});

🌍 Your Environment

Angular Version:




Angular CLI: 9.1.4
Node: 12.13.0
OS: win32 x64

Angular: 9.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router, upgrade
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@angular/cli                      9.1.4
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
cosminv6ucommented, Nov 30, 2020

If you remove updateOn: 'change' from all controls the async validator (actually all validators) will be called at submit only. But I guess that’s not the point, we should be able to mix and match them with different configurations.

0reactions
angular-automatic-lock-bot[bot]commented, Apr 25, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reactive Angular form to wait for async validator complete on ...
The async validator I use, must return => Promise<ValidationErrors | null> before the form gets valid again after a change to a form...
Read more >
Angular Form Validation on Blur and Submit - Fiyaz Hasan
So, the first one in our backpack is the updateOn: 'blur' option. Applying this will make the value of a Form Control change...
Read more >
How to add Async Validation to Angular Reactive Forms
The updateOn property tells Angular when to propagate the change. It can be set to onChange (the default) and onBlur – meaning the...
Read more >
Angular forms validation. Part III. Async Validators gotchas
User typing a valid value 'test' and then put the focus away from the filed (NOTE: updateOn: 'blur' is used to prevent multiple...
Read more >
The updateOn Option in Angular Forms - InDepth.Dev
This ensures they don't get frustrated by having to submit the same invalid form over and over. In Angular forms, validation takes the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found