Angular自定义组件内如何判断表单是否已提交（响应式/模板驱动）

我来帮你拆解这两种场景下的具体实现方法，都是在自定义组件内精准判断表单提交状态的靠谱方案：

在响应式表单中，自定义表单组件可以通过注入 FormGroupDirective 来获取父表单的提交状态。这个指令会关联到包裹你的组件的 <form> 元素，它的 submitted 属性会在表单提交后变为 true。

实现步骤： #

1. 在自定义组件中注入 FormGroupDirective，并接收父组件传入的 FormControl：

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

@Component({
  selector: 'custom-input',
  template: `
    <input 
      [formControl]="control" 
      placeholder="请输入内容"
      class="form-control"
    >
    <!-- 当表单已提交且控件无效时显示错误 -->
    <div *ngIf="formDirective.submitted && control.invalid" class="error-text">
      <span *ngIf="control.errors?.['required']">此字段为必填项</span>
      <span *ngIf="control.errors?.['minlength']">长度不能少于{{ control.errors?.['minlength'].requiredLength }}位</span>
    </div>
  `
})
export class CustomInputComponent {
  // 接收父表单传入的FormControl
  @Input() control: FormControl;

  constructor(public formDirective: FormGroupDirective) {}
}

2. 父组件中使用自定义组件时，绑定对应的表单控件：

<form [formGroup]="userForm" (ngSubmit)="handleSubmit()">
  <custom-input [control]="userForm.get('username')"></custom-input>
  <button type="submit">提交表单</button>
</form>

这样，当用户点击提交按钮后，formDirective.submitted 会变为 true，自定义组件就能据此触发错误提示的显示逻辑。

模板驱动表单下，自定义组件需要先实现 ControlValueAccessor 来和 ngModel 双向绑定，然后通过注入 NgForm 来获取表单的提交状态——这比依赖DOM类名的方式更可靠、更符合Angular的组件化思想。

实现步骤： #

1. 自定义组件实现 ControlValueAccessor，并注入 NgForm：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';

@Component({
  selector: 'custom-input',
  template: `
    <input 
      [(ngModel)]="innerValue" 
      (blur)="onInputBlur()"
      placeholder="请输入内容"
      class="form-control"
    >
    <!-- 利用NgForm的submitted属性判断提交状态 -->
    <div *ngIf="ngForm.submitted && !isValid()" class="error-text">
      请输入有效的内容
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  innerValue: string = '';
  private onChange: (value: string) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(public ngForm: NgForm) {}

  // 实现ControlValueAccessor的方法：写入值
  writeValue(value: string): void {
    this.innerValue = value || '';
  }

  // 实现ControlValueAccessor的方法：注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 实现ControlValueAccessor的方法：注册触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 自定义验证逻辑
  isValid(): boolean {
    return !!this.innerValue.trim();
  }

  // 输入框失触时标记为已触摸
  onInputBlur(): void {
    this.onTouched();
  }

  // 监听内部值变化，同步到父组件
  ngOnChanges(): void {
    this.onChange(this.innerValue);
  }
}

2. 父组件中使用自定义组件，绑定 ngModel 和表单指令：

<form #userForm="ngForm" (ngSubmit)="handleSubmit()">
  <custom-input name="email" ngModel required></custom-input>
  <button type="submit">提交表单</button>
</form>

当表单提交后，ngForm.submitted 会变为 true，结合你的自定义验证逻辑（比如非空检查），就能精准控制错误文本的显示。如果你之前依赖的是表单元素的 submitted 类，也可以通过 ngForm.submitted 来同步添加类名到自定义组件上，保持和之前逻辑的兼容。

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