Angular Material stepControl报错：FormGroup|null无法赋值给AbstractControlLike

问题原因 #

async管道订阅productDetailsFormGroup$后，可能返回FormGroup | null类型的值，但mat-step的stepControl属性要求传入AbstractControlLike类型，不接受null。这通常是因为你的productStore.selectProductDetailsForm$实际发出的值包含null，即使组件里声明的类型是Observable<FormGroup>。

解决方案 #

方案1：使用非空断言操作符

直接在模板里给async管道的结果添加!，告诉TypeScript该值不会为null：

<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>

注意：只有你能确保productDetailsFormGroup$永远不会发出null时，才推荐用这个方法。

方案2：用*ngIf确保表单存在后再渲染步骤

通过*ngIf配合变量赋值，先确认表单实例存在，再渲染mat-step：

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

这种方法更安全，能避免null值传入stepControl，同时也能防止步骤在表单未初始化时显示。

方案3：在Observable管道中过滤null值

在组件里通过RxJS的filter操作符，过滤掉null值，确保productDetailsFormGroup$只发出FormGroup类型：

import { filter } from 'rxjs';

readonly productDetailsFormGroup$: Observable<FormGroup>;

constructor(private productStore: ProductStore) {
  this.productDetailsFormGroup$ = this.productStore.selectProductDetailsForm$.pipe(
    filter(form => form !== null)
  );
}

这样模板里的async管道就不会得到null，类型错误自然消失。

内容的提问来源于stack exchange，提问作者San Jaisy