Angular自定义组件集成ngForm：如何实现表单有效性校验

要让自定义组件和父表单的校验功能正常集成，需要完成以下几个关键修改：

1. 父组件模板添加name属性 #

模板驱动表单中，每个表单控件必须通过name属性注册到NgForm，否则父表单无法识别该控件。修改父组件模板：

<form (ngSubmit)="onSubmit()" #f="ngForm">
    <app-input-text [(item)]="name" name="test_name" id="test_name"></app-input-text>
</form>

2. 改造自定义组件实现表单集成接口 #

让自定义组件实现ControlValueAccessor（用于和ngModel同步值与状态）和Validator（用于暴露内部校验结果）接口，并注册对应的提供者：

import { Component, Input, Output, EventEmitter, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { CommonModule, NgModel } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: "app-input-text",
  templateUrl: "./input-text.component.html",
  styleUrl: "./input-text.component.scss",
  standalone: true,
  imports: [CommonModule, FormsModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => InputTextComponent),
      multi: true
    }
  ]
})
export class InputTextComponent implements ControlValueAccessor, Validator {
  @Input() item: string | undefined;
  @Input() id: string | undefined;
  @Output() itemChange = new EventEmitter<string>();
  @ViewChild(NgModel) private inputNgModel!: NgModel;

  // ControlValueAccessor 回调函数
  private onChange: (value: string) => void = () => {};
  private onTouched: () => void = () => {};
  private isDisabled = false;

  // 实现 ControlValueAccessor 方法
  writeValue(value: string | undefined): void {
    this.item = value;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

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

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  // 实现 Validator 方法，暴露内部输入框的校验错误
  validate(control: AbstractControl): ValidationErrors | null {
    return this.inputNgModel.control.errors;
  }

  onInputChange(value: string) {
    this.item = value;
    this.itemChange.emit(value);
    // 通知父表单值已变更
    this.onChange(value);
  }

  onInputBlur() {
    // 通知父表单控件已被触摸
    this.onTouched();
  }
}

3. 修改自定义组件模板，添加触摸状态监听 #

给内部输入框绑定blur事件，确保父表单能感知到控件的触摸状态：

<input
  [id]="id"
  type="text"
  class="form-control"
  [(ngModel)]="item"
  (ngModelChange)="onInputChange($event)"
  (blur)="onInputBlur()"
  required
  [disabled]="isDisabled"
/>

原理说明 #

• ControlValueAccessor接口让自定义组件具备和ngModel双向绑定的能力，同时能将值变更、触摸状态同步给父表单。
• Validator接口将内部输入框的校验错误（比如required未满足的错误）传递给父表单，让父表单能正确判断整体有效性。
• 添加name属性是模板驱动表单的要求，确保控件能被NgForm识别并纳入校验范围。

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