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.5Is this a regression?
Don't knowDescription
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:
- Created 3 years ago
- Reactions:2
- Comments:5 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.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.