Angular自定义表单控件：如何实现updateOn的submit选项监听父表单提交？

你的核心问题出在错误获取了FormGroup而非FormGroupDirective——你通过this.control._parent拿到的是表单控件的父FormGroup实例，而不是管理表单提交状态的FormGroupDirective指令实例，这就是为什么submitted一直是false、ngSubmit没触发的原因。下面给你一步步的解决方案：

1. 正确获取FormGroupDirective实例 #

不要用私有属性_parent，而是通过依赖注入直接获取宿主组件的FormGroupDirective。有两种方式：

方式一：构造函数直接注入（推荐） #

在自定义控件的构造函数里，用@Optional()和@Host()修饰符注入，避免控件不在表单内时出现注入错误：

import { Component, Optional, Host } from '@angular/core';
import { NgControl, ControlValueAccessor, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent implements ControlValueAccessor {
  currentValue: any;
  onChange: (value: any) => void = () => {};
  onTouched: () => void = () => {};

  constructor(
    @Self() private ngControl: NgControl,
    @Optional() @Host() private formGroupDirective: FormGroupDirective // 正确获取指令实例
  ) {
    ngControl.valueAccessor = this;
  }
}

方式二：通过Injector获取（如果构造函数注入不方便） #

如果你坚持用Injector，需要添加注入标志指定查找宿主的可选依赖：

import { Injector, InjectFlags } from '@angular/core';

// ...构造函数注入Injector
constructor(@Self() private injector: Injector) {}

ngOnInit() {
  this.ngControl = this.injector.get(NgControl);
  // 获取宿主的FormGroupDirective，找不到时返回null
  this.formGroupDirective = this.injector.get(
    FormGroupDirective,
    null,
    InjectFlags.Optional | InjectFlags.Host
  );
}

2. 监听表单提交事件，实现updateOn: 'submit'逻辑 #

当表单提交时，我们需要手动将自定义控件的视图值同步到模型（模拟Angular原生控件的updateOn: 'submit'行为）：

ngOnInit() {
  if (this.formGroupDirective) {
    // 监听表单提交事件
    this.formGroupDirective.ngSubmit.subscribe(() => {
      // 仅当控件的updateOn设置为'submit'时执行同步
      if (this.ngControl.control?.updateOn === 'submit') {
        // 将当前视图值同步到模型
        this.onChange(this.currentValue);
        // 标记控件为已触摸（可选，符合表单交互规范）
        this.onTouched();
      }
    });
  }
}

// 实现ControlValueAccessor的必备方法
writeValue(value: any): void {
  this.currentValue = value;
}

registerOnChange(fn: any): void {
  this.onChange = fn;
}

registerOnTouched(fn: any): void {
  this.onTouched = fn;
}

3. 额外处理手动提交场景 #

如果父组件通过formGroupDirective.markAsSubmitted()手动触发表单提交，ngSubmit事件不会触发，这时候可以监听submitted属性的变化：

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

// 让组件实现DoCheck接口
export class CustomInputComponent implements ControlValueAccessor, DoCheck {
  private previousSubmitted = false;

  ngDoCheck() {
    if (this.formGroupDirective && this.formGroupDirective.submitted !== this.previousSubmitted) {
      this.previousSubmitted = this.formGroupDirective.submitted;
      if (this.previousSubmitted && this.ngControl.control?.updateOn === 'submit') {
        this.onChange(this.currentValue);
        this.onTouched();
      }
    }
  }
}

关键注意事项 #

• 永远不要直接访问Angular的私有属性（比如_parent），这些属性没有公开API保证，版本更新时可能会失效。
• 用@Optional()确保控件可以单独使用（不在FormGroup内时不会报错）。
• 测试时要确保父组件的表单标签绑定了[formGroup]和(ngSubmit)，比如：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <app-custom-input formControlName="customField" [updateOn]="'submit'"></app-custom-input>
  <button type="submit">提交</button>
</form>

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