Angular 15严格模式下FormBuilder创建类型化响应式表单报错求助

类实例属性的初始化逻辑会在Angular执行构造函数依赖注入之前运行，所以你在类顶层直接通过this.fb.group()初始化form时，fb还未被注入，自然会抛出Cannot read properties of undefined (reading 'group')的错误。

有两种不丢失类型的正确写法：

方案1：构造函数内初始化表单 #

把表单初始化逻辑移到构造函数内部，此时fb已经完成注入：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  form: FormGroup<{
    email: FormControl<string | null>;
    password: FormControl<string | null>;
  }>;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ["", {
        validators: [Validators.required, Validators.email]
      }],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

  login() {

  }
}

TypeScript会自动推导FormGroup的泛型类型，无需手动声明也能保留完整的类型校验能力。

方案2：通过ngOnInit钩子初始化 #

实现OnInit接口，在ngOnInit中初始化表单，这个钩子会在构造函数执行、依赖注入完成后触发：

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

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form!: FormGroup<{
    email: FormControl<string | null>;
    password: FormControl<string | null>;
  }>;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      email: ["", {
        validators: [Validators.required, Validators.email]
      }],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

  login() {

  }
}

这里的!是非空断言，我们确定ngOnInit会在组件初始化时执行，form一定会被赋值，不会出现未定义的情况，同时完整保留了表单的类型信息。

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