如何在Angular 14中创建支持自定义验证的复用输入组件？

你提出的通过数组对象传递错误规则的方案完全可行，以下是具体实现步骤，能让你的自定义输入组件灵活适配不同验证场景（比如必填、长度限制、格式校验等）。

一、自定义输入组件核心实现 #

1. 组件类代码 #

在custom-input.component.ts中实现ControlValueAccessor（对接Angular表单系统），并定义errors输入属性接收错误规则：

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor, OnInit {
  @Input() label: string = '';
  @Input() errors: Array<{ type: string; message: string }> = [];
  
  value: string = '';
  onChange: any = () => {};
  onTouched: any = () => {};
  isInvalid = false;
  currentErrorMsg = '';

  constructor(public ngControl: NgControl) {
    // 将当前组件绑定到NgControl，实现表单控件集成
    ngControl.valueAccessor = this;
  }

  ngOnInit() {
    // 监听表单控件状态变化，实时更新错误信息
    this.ngControl.statusChanges.subscribe(() => {
      this.updateErrorState(this.ngControl.control);
    });
  }

  // 实现ControlValueAccessor接口方法：写入值到组件
  writeValue(value: any): void {
    this.value = value || '';
  }

  // 注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 输入框值变化时通知表单系统
  onInputChange(event: Event) {
    const input = event.target as HTMLInputElement;
    this.value = input.value;
    this.onChange(this.value);
    this.onTouched();
  }

  // 根据控件状态匹配错误信息
  private updateErrorState(control: any) {
    this.isInvalid = control.invalid && (control.dirty || control.touched);
    if (this.isInvalid) {
      // 获取第一个触发的错误类型
      const errorType = Object.keys(control.errors)[0];
      // 匹配传入的错误规则，获取对应提示
      const matchedError = this.errors.find(err => err.type === errorType);
      this.currentErrorMsg = matchedError ? matchedError.message : '输入格式无效';
    } else {
      this.currentErrorMsg = '';
    }
  }
}

2. 组件模板代码 #

custom-input.component.html中渲染标签、输入框和错误提示：

<div class="custom-input-wrap">
  <label class="input-label">{{ label }}</label>
  <input 
    type="text"
    [value]="value"
    (input)="onInputChange($event)"
    (blur)="onTouched()"
    [class.input-invalid]="isInvalid"
    placeholder="请输入{{ label }}"
  >
  <span class="error-text" *ngIf="isInvalid">{{ currentErrorMsg }}</span>
</div>

3. 基础样式（可选） #

给组件添加基础样式，提升视觉反馈：

.custom-input-wrap {
  margin-bottom: 1.5rem;
}

.input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  max-width: 300px;
}

.input-invalid {
  border-color: #dc3545;
  background-color: #f8d7da;
}

.error-text {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

二、父组件中使用自定义输入组件 #

1. 父组件表单定义 #

在app.component.ts中创建表单并设置验证规则：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('表单提交:', this.userForm.value);
    }
  }
}

2. 父组件模板调用 #

app.component.html中使用自定义输入组件，传递对应的错误规则：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <app-custom-input
    formControlName="username"
    label="用户名"
    [errors]="[
      { type: 'required', message: '用户名不能为空' },
      { type: 'minlength', message: '用户名至少需要3个字符' }
    ]"
  ></app-custom-input>

  <app-custom-input
    formControlName="email"
    label="邮箱"
    [errors]="[
      { type: 'required', message: '邮箱不能为空' },
      { type: 'email', message: '请输入有效的邮箱格式' }
    ]"
  ></app-custom-input>

  <button type="submit" [disabled]="userForm.invalid">提交表单</button>
</form>

三、核心逻辑说明 #

• 组件通过ControlValueAccessor接口实现与Angular表单系统的双向绑定，确保formControlName能正常关联表单控件。
• 利用NgControl监听控件的状态变化（比如脏值、触摸、验证状态），自动触发错误信息更新。
• 通过errors输入属性传递不同字段的错误规则，实现组件的复用性——每个输入字段可以自定义自己的错误提示内容。

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