angular: ngSubmit should trigger after Asynchronous Validation completes

🚀 feature request

Relevant Package

This feature request is for @angular/forms

Specifically, Reactive Forms


**in Template**
<form [formGroup]="myFormGroup" (ngSubmit)="mFG_submit()"></form>

**In Component**
mFG_submit() {
   if (!myFormGroup.valid)

   //logic that will run if and only if the entire form is valid after both 
      sync and async validators have finished executing

The problem with the above code is that if myFormGroup has any controls with asynchronous validators, then ngSubmit is triggered after the async validators have started executing, but before they have finished executing. As as result, when the ‘if’ gate inside mFG_submit() is hit, it returns immediately, because the form status is ‘PENDING’. As a result, even if the asynchronous validator returns true, i,e, the control is valid, the submission logic is never executed.

Describe the solution you’d like

One solution is to check on every submit if the form status is “PENDING”, and then listen to status changes, and emit ngSubmit again, the moment status changes. I would like to have such behaviour provided by the framework Currently, I use this directive

    selector: 'form[formGroup]'
export class ResubmitIfPendingDirective {
        private fgd: FormGroupDirective
    ) {
    private subscriptions: Subscription = new Subscription();
    private resubmission_sub: Subscription = new Subscription();

    ngOnInit() {
        //listen to ngSubmit of the form
        this.subscriptions.add(this.fgd.ngSubmit.subscribe(() => {
            //if you are already subscribed to status changes, unsubscribe

            //if your form is PENDING when submitted, subscribe to status changes
            if (this.fgd.control.pending) {
                this.resubmission_sub = this.fgd.control.statusChanges

                        //don't do anything if new emitted status is PENDING 
                        filter(() => !this.fgd.control.pending),

                        //status no longer PENDING, time to resubmit
                        //and stop observing statusChanges
                        // above 2 pipes can be combined, I separated for clarity
                        // first(() => !this.fgd.control.pending)

                    ).subscribe(() => this.fgd.ngSubmit.emit());

                //since the validation has already been run, 
                //and there have no change in the values of the controls,
                //the status of this follow-up ngSubmit will either emit 
                //VALID or INVALID
                //therefore, the ngSubmit we emit will simply 
                //unsubscribe resubmission_sub
                //and never re-enter this if() block
                //Thus, No infinite loop of submits
    ngOnDestroy() {
        //stop listening to ngSubmit and status changes

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 24
  • Comments: 22 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I think we should add that flag as an option into like: form: FormGroup ={ ...control }, { waitForAsyncValidation: true });

and have a method in FormGroup to change this flag

for most use-cases having a flag ‘waitForAsyncValidation’ which defaults to true would be the way to go.

I agree that this is the easiest solution. However, we’d need to default to false to avoid making breaking changes. Then we could add a migration and flip the default in a future framework version.

Would you be comfortable putting together a PR to fix this? I’d like to fix it, but don’t have the bandwidth right now. Happy to review and merge it though.

Yes, that is exactly the situation that made me pursue this route. XD

PS: Pls forgive me for pressing the wrong button. 😛

I have also encountered this issue. It seems that if you have a long form that it’s not so much of an issue - however if you’re using a reactive form for a simple login, that’s when it becomes a problem. Because a user presses enter to login after they type their password. This triggers the validation, but because the state is “PENDING”, the submission cannot go ahead. The solution is to set up a complex observable that waits until the status is valid etc…

A cleaner solution would be much appreciated.