Type 'FormGroup<any> | null' is not assignable to type 'AbstractControlLike' with Angular material stepControl

Question

 <mat-step [editable]="true" [stepControl]="productDetailsFormGroup$ | async">
            <ng-template matStepLabel>Product details</ng-template>
            <ng-template matStepContent>
              <fetebird-ui-product-details></fetebird-ui-product-details>
            </ng-template>
  </mat-step>

In the component

readonly productDetailsFormGroup$: Observable<FormGroup>;

constructor(private productStore: ProductStore) {
    this.productDetailsFormGroup$ = this.productStore.selectProductDetailsForm$;
  }

Error

error TS2322: Type 'FormGroup<any> | null' is not assignable to type 'AbstractControlLike'.
  Type 'null' is not assignable to type 'AbstractControlLike'.

Answer 1

The result of async pipe is always T | null or null, and the stepControl doesn't accept null.

You can add *ngIf to make sure it's not null before using it, like the following:

<mat-step
  *ngIf="productDetailsFormGroup$ | async as stepControl"
  [editable]="true"
  [stepControl]="stepControl"
>
  <ng-template matStepLabel>Product details</ng-template>
  <ng-template matStepContent>
    <fetebird-ui-product-details></fetebird-ui-product-details>
  </ng-template>
</mat-step>