如何让Angular组件中的ControlContainer注入可选？

问题根源 #

组件构造器直接注入ControlContainer，当父组件未提供FormGroup时，Angular无法找到该服务的提供者，因此抛出NullInjectorError。

可行解决方案 #

通过以下修改，可实现无父FormGroup时复用组件的只读视图：

1. 可选注入ControlContainer #

在构造器中为ControlContainer添加@Optional()装饰器，这样父组件未提供该服务时不会触发错误：

import { Optional } from '@angular/core';

// ...

constructor(@Optional() public readonly controlContainer: ControlContainer) {}

2. 动态初始化FormGroup #

在ngOnInit中判断是否存在父组件的ControlContainer，结合isEditModeActive状态决定FormGroup的来源：

ngOnInit(): void {
  // 优先使用父组件的FormGroup，无则创建本地空FormGroup
  this.organizationFinancialFormGroup = this.controlContainer?.control as FormGroup ?? new FormGroup({});

  if (this.customer.bankAccounts.length === 0) {
    this.customer.bankAccounts = [new BankAccount()];
  }
  this.bankAccount = this.customer.bankAccounts[0];

  // 仅在编辑模式下初始化表单控件
  if (this.isEditModeActive) {
    this.organizationFinancialFormGroup.addControl(
      'currency',
      new FormControl(this.customer.currency, [])
    );

    this.organizationFinancialFormGroup.addControl(
      'name',
      new FormControl(this.bankAccount.name, [
        Validators.maxLength(this.MAX_NAME_LENGTH),
      ])
    );

    // 其余控件添加逻辑保持不变...
  }

  // 只读模式下禁用表单
  if (!this.isEditModeActive) {
    this.organizationFinancialFormGroup.disable();
  }
}

3. 模板适配只读状态 #

确保模板根据isEditModeActive切换展示方式，只读模式下直接展示数据而非使用可编辑控件：

<!-- 示例：名称字段的切换逻辑 -->
<span *ngIf="!isEditModeActive">{{ bankAccount.name }}</span>
<input 
  *ngIf="isEditModeActive" 
  [formControlName]="'name'"
  maxlength="{{ MAX_NAME_LENGTH }}"
/>

额外优化 #

只读模式下可完全跳过表单控件的创建，直接使用原始数据展示，减少不必要的性能开销：

ngOnInit(): void {
  if (this.customer.bankAccounts.length === 0) {
    this.customer.bankAccounts = [new BankAccount()];
  }
  this.bankAccount = this.customer.bankAccounts[0];

  // 仅在编辑模式且存在父FormGroup时初始化表单
  if (this.isEditModeActive && this.controlContainer) {
    this.organizationFinancialFormGroup = this.controlContainer.control as FormGroup;
    // 初始化表单控件逻辑...
  }
}

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