Angular响应式表单报formGroup expects a FormGroup instance错误如何解决

错误原因 #

• 服务构造函数中调用resetForm的写法错误，缺少函数执行括号，导致服务初始化时没有生成FormGroup实例
• 组件中仅在ngOnDestroy（组件销毁生命周期）调用resetForm，组件初始化渲染时表单实例为undefined，模板绑定[formGroup]时找不到合法的FormGroup实例
• 现有resetForm方法中只定义了cardDetails嵌套结构，缺少模板中用到的paymentRequest完整嵌套FormGroup定义，修复前两个问题后也会继续报错

修复方案 #

1. 服务文件代码修复

constructor(private http: HttpClient, private fb: FormBuilder) {    
  // 补充括号实际执行resetForm方法
  this.resetForm(); 
}  
resetForm() {
  this.form = this.fb.group({
    cardDetails: this.fb.group({
      cardholderName: [''],
      cardNumber: [''],
      expiryDate: [''],
      securityCode: [''],
    }),
    // 补全模板用到的paymentRequest完整嵌套FormGroup结构
    paymentRequest: this.fb.group({
      transactionType: [''],
      vendorTxCode: [''],
      amount: [''],
      currency: [''],
      description: [''],
      customerFirstName: [''],
      customerLastName: [''],
      paymentMethod: this.fb.group({
        card: this.fb.group({
          reusable: [''],
          save: ['']
        })
      })
    })
  });
}

2. Component.ts代码修复

payment!: Payment;  
// 组件初始化阶段就调用表单初始化逻辑，保证渲染前FormGroup实例已存在
ngOnInit(): void {
  this.appService.resetForm();
}  
ngOnDestroy(): void {
  // 若不需要销毁时重置表单可删除此行
  this.appService.resetForm();
}  
get form() {
  return this.appService.form;
}

3. 可选优化（避免时序问题）

模板中增加判断，表单实例存在时再渲染表单：

<form *ngIf="form" [formGroup]="form">
  <!-- 原有表单内容不变 -->
</form>

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