Angular 9升级至14：如何合规初始化userForm（仅在initForm创建）

这个错误源于Angular 14默认启用了TypeScript的strictPropertyInitialization（严格属性初始化）检查，而Angular 9默认未开启该规则，导致旧代码在新版本中触发报错。要在不提前创建空FormGroup的前提下解决问题，推荐以下两种方式：

方案一：使用非空断言操作符（最优解） #

在属性声明后添加!，明确告知TypeScript编译器：该属性一定会在使用前完成初始化，无需在构造函数或声明阶段赋值。

修改后的代码示例：

import { FormGroup, FormBuilder } from '@angular/forms';
import { OnInit } from '@angular/core';

export class YourComponent implements OnInit {
  // 添加!操作符标记属性会被后续初始化
  userForm!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.initForm();
  }

  private initForm(): void {
    this.userForm = this.formBuilder.group({
      // 你的表单控件配置
      name: [''],
      email: ['']
    });
  }
}

由于ngOnInit会在组件模板渲染前执行，userForm在被模板或其他方法调用前已完成初始化，不会出现空值风险。

方案二：针对性关闭检查（不推荐） #

若你不想使用非空断言，可通过配置关闭单个属性或全局的初始化检查，但这会降低类型安全性，仅建议临时应急使用：

• 全局关闭（修改tsconfig.json）：

{
  "compilerOptions": {
    "strictPropertyInitialization": false,
    // 其他配置项...
  }
}

• 单个属性忽略（添加注释）：

// @ts-ignore: TS2564
userForm: FormGroup;

内容的提问来源于stack exchange，提问作者Marc Le Bihan