MatthiasKunnen / angular-form-status-workaround

Workaround for an Angular form bug with async validators

Angular form status workaround

Angular forms can sometimes be stuck pending as described in angular/angular#13200 and angular/angular#14542.

This RxJS operator provides a temporary workaround until this issue is fixed upstream. When the bug is fixed, this library will be deprecated.

Example usage

import { fixFormStatus } from 'angular-form-status-workaround';

form.statusChanges.pipe(
    fixFormStatus(form),
).subscribe(s => {
    // WILL emit when the async validators complete and not stay stuck at PENDING
});

This operator can also be used on any subclass of AbstractControl.

It is also possible to state the rate at which the status will be checked by passing the time in milliseconds as a second argument. Example: fixFormStatus(form, 100). The default rate is 250ms.

Unsubscribing

statusChanges like valueChanges returns an observable that does not complete. You must unsubscribe to avoid memory leaks and unwanted behavior. This can be achieved using takeUntil and takeWhile.

Examples

Only get notified when status is no longer pending.

this.form.statusChanges.pipe(
    fixFormStatus(this.form),
    takeWhile(status => status === 'PENDING', true),
    last(),
).subscribe(() => {
    // Emits once when status is no longer pending, then completes
});