如何在Angular中创建带验证的自定义输入组件并配置错误信息数组？

完全可以采用你示例中的方式，通过传入错误配置数组来为每个字段绑定验证规则对应的提示信息。以下是具体实现步骤和关键代码：

1. 自定义输入组件核心实现 #

首先在自定义组件中定义输入属性接收错误配置，同时实现ControlValueAccessor以支持Angular表单的双向绑定：

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  @Input() label: string = '';
  // 接收外部传入的错误配置数组
  @Input() errors: { type: string; message: string }[] = [];
  
  value: string = '';
  isDisabled = false;
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  constructor(@Inject(NgControl) public ngControl: NgControl) {}

  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;
  }

  handleInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.value = input.value;
    this.onChange(this.value);
  }

  handleBlur(): void {
    this.onTouched();
  }

  // 获取当前表单控件的错误集合
  get controlErrors(): { [key: string]: any } {
    return this.ngControl.control?.errors || {};
  }

  // 判断是否需要显示错误信息
  get showErrors(): boolean {
    const control = this.ngControl.control;
    return control ? !control.valid && (control.touched || control.dirty) : false;
  }
}

2. 自定义组件模板渲染错误 #

在组件模板中，根据控件状态和错误配置数组，匹配并显示对应的错误提示：

<div class="input-group">
  <label class="input-label">{{ label }}</label>
  <input
    type="text"
    [value]="value"
    [disabled]="isDisabled"
    (input)="handleInput($event)"
    (blur)="handleBlur()"
    class="input-field"
  >
  <!-- 错误提示区域 -->
  <div *ngIf="showErrors" class="error-messages">
    <span *ngFor="let err of errors" class="error-text" *ngIf="controlErrors[err.type]">
      {{ label }} {{ err.message }}
    </span>
  </div>
</div>

3. 父组件中使用自定义输入组件 #

在父组件的表单中，为自定义输入组件传入错误配置数组，并确保表单控件设置了对应的验证规则：

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

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

  constructor(private fb: FormBuilder) {
    // 初始化表单并设置验证规则
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(5)]]
    });
  }

  onSubmit(): void {
    if (this.userForm.valid) {
      // 处理表单提交逻辑
    }
  }
}

父组件模板：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <app-custom-input
    formControlName="username"
    label="Username"
    [errors]="[
      { type: 'required', message: 'is required' },
      { type: 'minlength', message: 'must be at least 5 characters' }
    ]"
  ></app-custom-input>
  
  <button type="submit" class="submit-btn">Submit</button>
</form>

关键注意事项 #

• Angular内置验证器的错误类型为小写（比如minLength验证器对应的错误类型是minlength），需确保传入的errors数组中的type与之一致。
• 通过NgControl注入获取当前表单控件的状态，是实现错误匹配的核心，必须在自定义组件中注入该依赖。
• showErrors方法确保错误信息仅在控件无效且已被触碰/修改后显示，避免初始状态就展示错误提示，提升用户体验。

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