FormGroup & FormControl statusChanges are not emitted on creation

[MickL]

I'm submitting a ...

[X] bug report
[ ] feature request
[ ] support request

Current behavior
FormGroup and FormControl don't emit statusChange after first creation (while untouched / pristine?) with asyncValidator.

1. Initial status of FormGroup and FormControl is "PENDING"
2. Both status changes to "VALID" or "INVALID"
3. statusChange is not emitted

Expected behavior
statusChange should always be emitted.

Minimal reproduction of the problem with instructions

1. Create a FormGroup with the FormBuilder and add a FormControl with asyncValidator(e.g. with a TimeOut Promise of 2sec).
2. Subscribe to FormGroup.statusChange or FormGroup.controls.key.statusChange

Angular version
2.4.1

[DzmitryShylovich]

Pls provide a plunkr

[MickL]

https://plnkr.co/edit/BvnnfxHK3mgNVIVI7Yhs?p=preview

=> Emitted status is not set to "VALID" on first validation on init. Only if u start typing the status is emitted correctly.

[Toxicable]

This is not a bug, the type of statusChanges is an EventEmitter which is a class that extends Subject which does not emit an initial value. If you want it to emit then call the control.updateValueAndValidity() method after subscribing to get the initial value

[MickL]

I know there is no initial value that is fine. But then the status changes from "PENDING" to "VALID" or "INVALID" which is not emitted.

Thanks for the hint to use updateValueAndValidity(). This updates to "PENDING" but then still the status-change is not emitted as described above and would still be "PENDING". I updated the Plunkr to make the bug more obvious.

[MickL]

I also noticed the async validator is called 4 times on FormBuilder.group(). This would cause 4 server requests.

I updated my plunker, just check the console.

Opened another issue for this here: #14551

[jackkoppa]

+1 to this. There would seem to be a need to modify angular/packages/forms/src/model.ts, and have statusChanges fire on a change of pending. The plunker linked above properly demonstrates this issue, which I'm also having in my project: no way to tell on initialization of the component whether or not the form has finished its pending status.

[RobYed]

I encounter the same issue. On page load a canActivate method checks the status of my FormGroups. As I have some async validator functions, I have to wait until the status of my FormGroup is not PENDING anymore. This does never happen, due to the above mentioned bug.

As a workaround, I now dirty check the status (not so cool):

asyncCanActivate(form: FormGroup): Observable<boolean> {

    const result = new Subject();

    const interval = setInterval(() => {
      if (form.status === 'VALID') {
        result.next(true);
        result.complete();
        clearTimeout(timeout);
        clearInterval(interval);
      }
    }, PermissionService.STATUS_UPDATE_RATE);

    const timeout = setTimeout(() => clearInterval(interval), PermissionService.MAX_UPDATE_INTERVAL);

    return result;
}

[mikeperri]

I worked around this in my async validator by calling the parent control's updateValueAndValidity on the next tick after the asynchronous call completes.

This causes the parent control (the FormGroup) to emit a VALID status, but it doesn't cause the control itself to emit anything. If you call the control's updateValueAndValidity, that makes the async validator run again, which isn't ideal already, and worse, it creates an infinite loop. So if you need the control itself to emit, not its parent, then this doesn't help much.

  console.log('myAsyncValidator is called!');
  
  return new Promise (resolve => {
    setTimeout(() => {
      console.log('myAsyncValidator finished!')
      setTimeout(() => c.parent.updateValueAndValidity()) // Workaround
      if(c.value != '123') {
        resolve({"isNot123": true});
      }
      else
        resolve(null)
    }, 2500);
  });
}

Here's a fork of the plunker: https://plnkr.co/edit/QykVJrgM8j3EA51VU9Xl?p=preview

[JohnYoungers]

I guess I also don't know how we're supposed to be handling this:

I have a directive that in ngOnInit() will subscribe to statusChanges, and when the state switches between Valid/Invalid it'll render the validation message appropriately.

This has been working fine since the async validator runs as the user changes the fields; however, I've run into a situation where I'm async validating fields as they're created in the form group (the form is created based on an existing object that may be invalid).

In my directive I can see the initial state of the control is 'PENDING', but once that completes my statusChanges subscription is not hit: is the only resolution to do some sort of setTimeout hack if it's initially pending and wait for that to complete?

edit

Here's my workaround for now:

           this.formControl.statusChanges.subscribe((a) => {
                this.statusChanged(a);
            });

            //TODO: remove this at some point
            if (this.formControl.pending) {
                let setInitialStatus = () => {
                    if (this.formControl.pending) {
                        t = setTimeout(setInitialStatus, 50);
                    } else {
                        this.statusChanged(this.formControl.valid ? 'VALID' : 'INVALID');
                        clearTimeout(t);
                    }
                };

                let t = setTimeout(setInitialStatus, 50);
            }

[kiancross]

Any update on this?