如何修复响应式表单校验中的‘Object is Possibly null’错误？

你遇到的错误来自TypeScript的严格类型检查：FormGroup.get()方法可能返回null（当指定的控件名不存在时），直接访问其valid或touched属性会触发类型安全报错。以下是几种实用的解决方式：

方案1：使用可选链操作符（推荐） #

在HTML模板中通过?.可选链操作符安全访问控件属性，当控件为null时会自动短路，避免报错：

<input type="text"
       id="username"
       formControlName="username"
       class="form-control">

<span 
  *ngIf="!signUpForm.get('username')?.valid && signUpForm.get('username')?.touched"
  class="help-block"
> Enter User Name ! </span>

方案2：在组件中添加控件Getter（更优雅） #

在.ts组件文件中为表单控件定义Getter方法，提前做类型断言，让模板代码更简洁且类型安全：

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

@Component({
  selector: 'app-rective-forms',
  templateUrl: './rective-forms.component.html',
  styleUrls: ['./rective-forms.component.css']
})
export class RectiveFormsComponent implements OnInit {

  genders = ['Male', 'Female'];
  signUpForm!: FormGroup;

  // 为表单控件定义Getter
  get username() {
    return this.signUpForm.get('username') as FormControl;
  }

  get email() {
    return this.signUpForm.get('email') as FormControl;
  }

  ngOnInit(): void {
    this.signUpForm = new FormGroup({                                                     
      'username': new FormControl(null, Validators.required),                               
      'email': new FormControl(null, [Validators.required, Validators.email]),                                   
      'gender': new FormControl('Male')                                               
    });  
  }

  onSubmit(){
    console.log(" Form Submitted ! ");
    console.log(this.signUpForm);
  }
}

修改后HTML模板可简化为：

<input type="text"
       id="username"
       formControlName="username"
       class="form-control">

<span 
  *ngIf="!username.valid && username.touched"
  class="help-block"
> Enter User Name ! </span>

方案3：使用非空断言操作符（不推荐） #

如果你能确保目标控件一定存在，可以用!非空断言强制告诉TypeScript该值不为null，但这种方式存在风险——后续若控件名修改或移除，会导致运行时错误：

<span 
  *ngIf="!signUpForm.get('username')!.valid && signUpForm.get('username')!.touched"
  class="help-block"
> Enter User Name ! </span>

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