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

在Angular中，@Input装饰器用于接收父组件传递的数据，并在数据发生变化时触发自定义表单控件的验证。当父组件的属性通过@Input装饰器绑定到子组件时，子组件可以监听这个属性的变化，并在变化时执行相应的验证逻辑。

自定义表单控件是指通过实现ControlValueAccessor接口来创建的自定义表单控件。ControlValueAccessor接口定义了一组用于读取和写入表单控件值的方法，包括registerOnChange、registerOnTouched、writeValue和setDisabledState。通过实现这个接口，我们可以创建具有自定义行为的表单控件。

当使用@Input装饰器绑定父组件的属性到子组件时，可以通过在子组件中监听属性变化的钩子函数来触发自定义表单控件的验证。常用的钩子函数有ngOnChanges和ngDoCheck。

ngOnChanges钩子函数会在父组件传递给子组件的@Input属性发生变化时被调用。我们可以在这个钩子函数中执行自定义表单控件的验证逻辑。例如，可以在ngOnChanges中调用自定义表单控件的validate方法来触发验证。

ngDoCheck钩子函数会在每个变更检测周期中被调用。我们可以在这个钩子函数中检测父组件传递给子组件的@Input属性是否发生变化，并在变化时执行相应的验证逻辑。

以下是一个示例代码，演示了如何在@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;
  }
}

在上述示例中，CustomInputComponent是一个自定义的表单控件，它接收一个@Input属性value，并在ngOnChanges钩子函数中执行验证逻辑。当value属性发生变化时，会调用validate方法进行验证，并通过onChange通知表单控件值发生变化。在模板中，我们使用ngModel指令将输入框的值与value属性进行双向绑定，并在输入框失去焦点时调用onTouched方法。

这是一个简单的示例，实际的自定义表单控件可能会有更复杂的验证逻辑和UI展示。根据具体的需求，可以使用不同的验证方式，如正则表达式验证、异步验证等。

对于腾讯云相关产品，推荐使用腾讯云云服务器（CVM）来进行服务器运维，腾讯云数据库（TencentDB）来进行数据库存储，腾讯云CDN（Content Delivery Network）来进行网络通信加速，腾讯云安全产品（如Web应用防火墙、DDoS防护等）来进行网络安全保护。具体产品介绍和链接地址可以参考腾讯云官方文档。