Angular 15中如何解决FormGroup对象可能为null的报错

问题根源分析 #

你的代码存在多个基础问题，直接导致了createCountryForm可能为null的报错：

1. 存在重复构造函数，第二个构造函数覆盖了第一个，不仅丢失了ToastrService的注入，还可能导致表单初始化逻辑混乱
2. createCountry()方法未在组件初始化时调用，createCountryForm仅被声明但未实际初始化
3. onCountryChange方法中存在变量引用错误（如this.form不存在、误用循环参数/类属性）
4. get fc()中存在拼写错误（createMerchantForm应为createCountryForm）

具体解决步骤 #

1. 修复基础代码错误 #

• 移除重复的构造函数，保留包含FormBuilder和ToastrService的版本
• 在ngOnInit中调用createCountry()，确保组件初始化时表单被创建
• 修正get fc()中的拼写错误
• 修正onCountryChange里的变量和表单控件引用错误

2. 针对「object is possibly null」的针对性处理 #

方式一：确保表单始终初始化（推荐）

在ngOnInit中调用createCountry()，从根源避免createCountryForm为null：

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

方式二：使用非空断言操作符!

如果你能确保createCountryForm已初始化，可添加!告诉TypeScript该变量不会为null：

this.createCountryForm!.get('CountryCode')?.setValue(selectedCountry.country_code);

方式三：使用可选链+空值判断

通过条件判断或可选链?.避免null访问：

if (this.createCountryForm) {
  this.createCountryForm.get('CountryCode')?.setValue(selectedCountry.country_code);
}

完整修正后的代码示例 #

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

export class CountryCreateComponent implements OnInit {
  countriesDatas: any[] = [];
  selectedCountryCode: string = '';
  selectedCountryName: string = '';
  createCountryForm!: FormGroup;

  constructor(
    private fb: FormBuilder,
    private toastr: ToastrService
  ) {}

  ngOnInit(): void {
    // 初始化表单，避免null状态
    this.createCountry();
  }

  createCountry() {
    this.createCountryForm = this.fb.group({
      CountryCode: ['', [Validators.required]],
      CountryName: [''],
    });
  }

  createValidate() {
    // 用可选链避免null访问
    if (!this.createCountryForm?.valid) {
      this.createCountryForm?.markAllAsTouched();
      return;
    }
  }

  // 修正拼写错误
  get fc() {
    return this.createCountryForm.controls;
  }

  onCountryChange() {
    // 修正表单控件引用，用可选链处理可能的null
    const countryCodeValue = this.createCountryForm.get('CountryCode')?.value;
    const selectedCountry = this.countriesDatas.find(item => item.country_code === countryCodeValue);

    if (selectedCountry && this.createCountryForm) {
      this.createCountryForm.get('CountryCode')?.setValue(selectedCountry.country_code);
      this.createCountryForm.get('CountryName')?.setValue(selectedCountry.country_name);
    }
  }
}

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