Angular子组件自定义验证如何控制父组件NgForm的valid状态

要实现这个需求，你需要让你的自定义文本框组件同时实现Angular的ControlValueAccessor（用于和表单系统通信）和Validator（用于内置验证逻辑）接口，并且在组件的providers中注册对应的令牌，这样父组件的NgForm就能自动识别该组件作为表单控件，同时自动应用内置的验证规则。

第一步：编写子组件类逻辑 #

完整的ec-textbox.component.ts代码如下：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-ec-textbox',
  templateUrl: './ec-textbox.component.html',
  providers: [
    // 注册为表单值访问器，让NgForm识别为表单控件
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => EcTextboxComponent),
      multi: true
    },
    // 注册为内置验证器，自动应用验证规则
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => EcTextboxComponent),
      multi: true
    }
  ]
})
export class EcTextboxComponent implements ControlValueAccessor, Validator {
  // 内部存储输入值
  public value: string = '';
  public isDisabled = false;

  // 表单回调函数，由Angular表单自动注入，无需手动实现
  private onChange = (val: string) => {};
  private onTouched = () => {};

  // ---------- ControlValueAccessor 接口实现（表单值同步逻辑） ----------
  writeValue(value: string): void {
    this.value = value || '';
  }

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

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

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

  // ---------- Validator 接口实现（内置验证逻辑） ----------
  validate(control: AbstractControl): ValidationErrors | null {
    // 核心验证规则：值等于xyz时返回错误
    if (control.value?.trim() === 'xyz') {
      return { invalidXyz: '输入值不能为xyz' };
    }
    return null;
  }

  // ---------- 视图交互处理 ----------
  public handleInput(event: Event): void {
    const inputVal = (event.target as HTMLInputElement).value;
    this.value = inputVal;
    // 通知表单值发生变化
    this.onChange(inputVal);
    // 标记控件已被触碰
    this.onTouched();
  }
}

第二步：修改子组件模板 #

ec-textbox.component.html代码如下：

<input 
  type="text" 
  [value]="value" 
  [disabled]="isDisabled"
  (input)="handleInput($event)"
>

第三步：父组件使用（无需额外验证配置） #

父组件的表单代码只需要给自定义文本框加上name属性（模板驱动表单识别控件的必填项，不属于验证配置），其余不需要任何修改：

<form #form="ngForm">
  <!-- 仅需加name属性，不需要编写任何验证相关代码 -->
  <app-ec-textbox name="customInput"></app-ec-textbox>

  <button type="submit" [disabled]="!form.valid">保存</button>
</form>

效果说明 #

• 当用户输入xyz时，子组件的验证方法会自动返回错误，该错误会同步到父表单的控件列表中，form.valid自动变为false，保存按钮直接被禁用
• 所有验证逻辑完全封装在子组件内部，父组件不需要做任何验证相关的配置
• 验证错误可以通过form.controls['customInput']?.errors获取，用于页面展示错误提示

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