Form forever pending (with async validators)

When subscribing to the forms valueChanges observable and in that subscription setting the status of the form, it can for ever be pending.
This can be caused by 3 things

To resolve the latter, you need to combine 2 observables, one for the valueChanges and one for the statusChanges

• The HTTP call fails:
  You need to catch the error and return either ‘undefined’ or ‘ ValidationErrors’
• An endless observable (one that never completes):
  You need to use ‘take’ or ‘first’ or any rxjs operator that completes the stream.
• Setting the status in a subscription on the valueChangess of the form:
  The async validation is net yet completed but the value changes event is already fired

private formValueAndStatusSubscription: Subscription;
public form: FormGroup;

  createSubscriptions() {
    // Subscribe to valueChanges and statusChanges
    this.formValueAndStatusSubscription =
      combineLatest([this.form.valueChanges, this.form.statusChanges]).subscribe(
        () => this.formStatusBaseOnValueAndStatusChanges = this.form.status
      );
  }

For more examples, check out my github.