在@Input更改时触发自定义表单控件验证

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

@Component({
  selector: 'app-custom-input',
  template: `
    <input [(ngModel)]="value" (blur)="onTouched()">
    <div *ngIf="error">{{ error }}</div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomInputComponent,
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor, OnChanges {
  @Input() value: string;
  error: string;

  private onChange: (value: string) => void;
  private onTouched: () => void;

  ngOnChanges() {
    this.validate();
  }

  validate() {
    // 执行自定义表单控件的验证逻辑
    if (!this.value) {
      this.error = '该字段不能为空';
    } else {
      this.error = '';
    }

    // 调用onChange通知表单控件值发生变化
    if (this.onChange) {
      this.onChange(this.value);
    }
  }

  // 实现ControlValueAccessor接口的方法
  writeValue(value: string) {
    this.value = value;
  }

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

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