Angular 12报错formGroup expects a FormGroup instance问题求助

• 先核对报错栈指向的模板行（template.html:25）是否是你贴出的这个form标签，排查页面其他位置是否存在其他绑定了[formGroup]="priceForm"但没加*ngIf判断的代码，大部分这类偶现报错都是因为遗漏了其他位置的绑定校验。
• 调整模板结构，把*ngIf判断移到form外层的ng-container上，避免Angular变更检测时同时处理结构指令和输入属性绑定的时序问题：

<ng-container *ngIf="priceForm">
  <form [formGroup]="priceForm">
    <!-- 原有表单内容 -->
  </form>
</ng-container>

• 修正formControlName的键值匹配问题：你原来的createPriceForm方法里，control的键是price.product?.id || 'price' + price.id，但模板里绑定的是[formControlName]="price.product.id"，如果存在price.product为空的场景，两边键名不匹配也可能间接触发表单校验异常，建议统一规则：

// 创建control时统一用字符串类型的键
const key = price.product?.id ? String(price.product.id) : `price${price.id}`;
group[key] = new FormControl(price.price);

<!-- 模板里也用相同的规则生成键 -->
<input matInput [formControlName]="price.product?.id ? String(price.product.id) : `price${price.id}`" />

• 新增变更检测强制刷新：因为你的priceForm是在HTTP请求的异步回调里赋值的，赋值后手动触发一次变更检测，避免视图更新滞后导致formGroup先绑定到旧值再触发*ngIf判断：
  首先在构造函数注入ChangeDetectorRef：

constructor(private cdr: ChangeDetectorRef) {}

然后赋值priceForm之后调用检测方法：

this.priceForm = this.createPriceForm();
this.cdr.detectChanges();

• 排查变量重置逻辑：如果你的编辑弹窗有关闭操作，检查关闭时是否把priceForm赋值为null/undefined，如果有，在重置变量前先把弹窗的DOM销毁，或者重置后也调用一次detectChanges，避免变量清空时表单还没销毁触发绑定校验。

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