Angular 12中声明FormGroup出现模板与初始化报错如何解决

1 修复TS2564 组件类初始化报错 #

该报错触发原因是TypeScript严格模式下的类属性初始化校验，要求所有属性必须在声明时或者构造函数内完成赋值，你当前在ngOnInit中赋值的写法无法被TS识别为合法初始化。
修复方案：在属性声明时添加非空断言符号!，主动告知TS该属性一定会被赋值，不会出现空值：

// 原写法：signupForm: FormGroup | undefined;
// 修改后：
signupForm!: FormGroup;

如果不想用非空断言，也可以直接把表单初始化逻辑移到构造函数中，同样可以解决该报错。 #

2 修复TS2531 模板空值报错 #

该报错触发原因是signupForm.get('xxx')的返回值类型为AbstractControl | null，TS检测到可能返回null，直接访问.valid、.touched属性就会触发类型报错。
两种常用修复方案可选：

• 方案A：模板使用可选链操作符?.，空值时自动终止属性访问，代码改动最小

<!-- 原代码 -->
<!-- <span *ngIf="!signupForm.get('password').valid && signupForm.get('password').touched"> -->
<!-- 修改后 -->
<span *ngIf="!signupForm.get('password')?.valid && signupForm.get('password')?.touched">

• 方案B：组件类封装表单控件getter，代码更简洁易维护
  在组件类中新增如下代码：

get passwordControl() {
  // 末尾加!断言返回值不为空
  return this.signupForm.get('password')!;
}

模板直接调用封装好的getter即可：

<span *ngIf="!passwordControl.valid && passwordControl.touched">

完整修复后代码示例 #

组件类代码 #

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

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
  signupForm!: FormGroup;
  constructor(public formBuilder: FormBuilder) { }
 
  ngOnInit(): void {
    // 注意：原代码默认值为空格，会导致必填校验初始就通过，建议改为空字符串
    this.signupForm = this.formBuilder.group({
      username:['', Validators.required],
      email:['', Validators.required],
      password:['',[Validators.required]]
    })
  }

  get passwordControl() {
    return this.signupForm.get('password')!;
  }
}

模板代码 #

<!-- 使用封装getter的写法 -->
<span *ngIf="!passwordControl.valid && passwordControl.touched">
  请输入密码
</span>

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