Angular如何将useExisting NgForm依赖设为可选 支持子组件脱离表单使用

直接修改子组件的viewProviders配置，通过工厂函数+可选注入的方式提供ControlContainer即可：

import { Component, Optional } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],
  viewProviders: [
    {
      provide: ControlContainer,
      // 找不到父NgForm时返回null，避免注入错误
      useFactory: (parentForm?: NgForm) => parentForm ?? null,
      // 标记NgForm为可选依赖，注入失败时返回undefined
      deps: [[new Optional(), NgForm]]
    }
  ]
})
export class ChildComponent {
  // 可选注入父表单，可用于内部差异化逻辑判断
  constructor(@Optional() public parentForm?: NgForm) {}
}

原理解释 #

• 依赖项前添加Optional装饰器后，Angular注入器找不到对应依赖时会返回undefined，不会抛出空注入错误
• 工厂函数判断如果存在父级NgForm就复用，不存在则返回null，Angular会自动处理ControlContainer为null的场景，子组件内的输入项会作为独立的ngModel正常运行

兼容验证 #

• 子组件被NgForm包裹时：输入项会自动纳入父表单的校验体系，父表单的valid、dirty等状态和子组件输入同步，原有功能不受影响
• 子组件单独使用时：不会抛出注入错误，输入项独立运行，功能正常

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