Angular：如何通过依赖注入从子FormControl获取FormGroup提交状态

• 你之前尝试注入NgForm时报错no provider for NgForm，本质是依赖注入链路匹配失败：
  • NgForm是模板驱动表单专属的根级指令，只会在绑定了NgForm上下文的DOM元素（也就是带ngModel的<form>标签）上注册为provider
  • 如果你当前用的是响应式表单（通过[formGroup]绑定的表单），根节点上根本不会挂载NgForm指令的provider，自然找不到对应的注入源
  • 依赖注入的查找逻辑是沿DOM树向上匹配最近的provider，如果你的子FormControl组件不在对应表单的DOM子树范围内，也会触发同类报错

场景1：响应式表单（Reactive Forms）场景 #

这是大部分嵌套子FormControl的常见场景，对应的根状态持有者不是NgForm，而是FormGroupDirective——也就是绑定在顶层[formGroup]元素上的内置指令。
在任意层级的子FormControl组件（包括实现了ControlValueAccessor的自定义控件组件）的构造函数中直接注入即可：

import { Component } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'app-custom-form-control',
  standalone: true,
  template: `<!-- 你的控件模板 -->`
})
export class CustomFormControlComponent {
  // 直接注入根表单指令实例
  constructor(private rootFormDirective: FormGroupDirective) {}

  // 直接访问提交状态
  get isFormSubmitted(): boolean {
    return this.rootFormDirective.submitted;
  }
}

• 工作原理：FormGroupDirective在顶层[formGroup]绑定的元素上注册为provider，不管子FormControl嵌套了多少层、是否属于中间的子FormGroup/FormArray节点，Angular都会沿DOM树向上找到这个根实例，全程不需要手动透传状态。

场景2：模板驱动表单（Template Driven Forms）场景 #

如果你的表单是用ngModel/ngModelGroup实现的，根状态持有者确实是NgForm指令，但需要加上可选注入标记避免脱离表单上下文时报错：

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

@Component({
  selector: 'app-custom-template-control',
  standalone: true,
  template: `<!-- 你的控件模板 -->`
})
export class CustomTemplateControlComponent {
  // 加@Optional标记，找不到provider时返回null而非抛错
  constructor(@Optional() private ngForm: NgForm) {}

  get isFormSubmitted(): boolean {
    // 判空处理不在表单内的场景
    return this.ngForm?.submitted ?? false;
  }
}

• 不要跨类型注入：响应式表单下不存在NgForm的provider，模板驱动表单下也不会自动注册FormGroupDirective，二者的根上下文完全独立
• 不要直接尝试注入FormGroup实例：FormGroup是纯TypeScript类，不是Angular指令，不会自动注册为DOM上的注入provider，直接注入必然报错
• 跨边界场景（比如控件通过CDK Overlay、弹窗渲染）下，DOM树的向上查找会断开，此时无法通过依赖注入拿到根表单状态，需要通过共享服务、Input透传的方式传递指令实例
• 两类指令的submitted属性都是内置维护的只读状态，会随表单原生submit事件、reset()方法自动更新，不要手动赋值修改

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