Angular父组件如何向子组件传递指令？验证指令透传问询

这个问题是Angular组件封装里的常见需求：当你把原生input包装成自定义组件后，外部添加的验证规则（不管是原生的required/email，还是自定义指令）默认只会绑定到<styled-input>宿主元素上，不会自动传递到内部的原生input。下面分两种场景给你具体的实现方案：

一、处理原生HTML验证属性（required、email等） #

对于这类原生验证属性，我们可以通过输入属性绑定的方式，把外部传入的属性值直接传递给内部input：

1. 先在组件类里定义对应的@Input()属性：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'styled-input',
  template: `
    <div>
      <input 
        [value]="value" 
        (input)="valueChanged.emit($event.target.value)"
        [required]="required"
        [email]="email"
        (blur)="collectInputErrors($event)"
      />
      <ul>
        <li *ngFor="let error of errors">{{ error }}</li>
      </ul>
    </div>
  `
})
export class StyledInputComponent {
  @Input() value: string;
  @Output() valueChanged = new EventEmitter<string>();
  
  // 接收原生验证属性，支持可选绑定
  @Input() required?: boolean;
  @Input() email?: boolean;
  @Input() pattern?: string;
  @Input() minlength?: number;
  
  errors: string[] = [];

  // 监听input失焦事件，收集原生验证错误
  collectInputErrors(event: Event) {
    const inputElem = event.target as HTMLInputElement;
    this.errors = [];
    
    if (!inputElem.validity.valid) {
      if (inputElem.validity.valueMissing) this.errors.push('此字段为必填项');
      if (inputElem.validity.typeMismatch) this.errors.push('请输入有效的邮箱地址');
      if (inputElem.validity.patternMismatch) this.errors.push('输入格式不符合要求');
      // 可以根据需要添加更多错误类型的判断
    }
  }
}

2. 这样在父组件里使用时，required、email这些属性就会直接作用到内部的input上，原生验证逻辑正常生效，错误信息也会被收集显示出来。

二、处理自定义验证指令（validationDirective1、validationDirective2） #

自定义Angular指令的处理要复杂一点，因为它们是绑定到组件宿主的。最佳实践是让你的StyledInputComponent实现ControlValueAccessor接口，把组件变成一个Angular表单系统能识别的“表单控件”，这样自定义验证指令就能直接作用于组件，同时我们可以把验证结果同步到内部input并显示错误。

步骤1：实现ControlValueAccessor接口 #

这个接口是Angular表单系统和自定义组件之间的桥梁，代码示例：

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

@Component({
  selector: 'styled-input',
  template: `
    <div>
      <input 
        [value]="innerValue" 
        (input)="onInputValueChange($event.target.value)"
        [required]="required"
        [email]="email"
        (blur)="onInputTouched()"
      />
      <ul>
        <li *ngFor="let error of errors">{{ error }}</li>
      </ul>
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StyledInputComponent),
      multi: true
    }
  ]
})
export class StyledInputComponent implements ControlValueAccessor {
  innerValue: string = '';
  errors: string[] = [];
  
  @Input() required?: boolean;
  @Input() email?: boolean;

  // ControlValueAccessor的回调函数，用于和表单系统通信
  private onChange: (value: string) => void = () => {};
  private onTouched: () => void = () => {};

  // 表单系统向组件写入值时触发
  writeValue(value: string): void {
    this.innerValue = value || '';
  }

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

  // 注册控件被触摸的回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 处理输入值变化，同步给表单系统
  onInputValueChange(value: string): void {
    this.innerValue = value;
    this.onChange(value);
  }

  // 处理控件被触摸
  onInputTouched(): void {
    this.onTouched();
  }
}

步骤2：让自定义验证指令实现Validator接口 #

你的validationDirective1和validationDirective2需要实现Validator接口，这样才能被Angular表单系统识别为验证器，作用于我们的自定义组件：

import { Directive } from '@angular/core';
import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[validationDirective1]',
  providers: [{ provide: NG_VALIDATORS, useExisting: ValidationDirective1, multi: true }]
})
export class ValidationDirective1 implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    // 这里写你的自定义验证逻辑
    const inputValue = control.value;
    if (!inputValue || inputValue.length < 5) {
      return { 'validationDirective1': '输入长度不能少于5个字符' };
    }
    return null;
  }
}

步骤3：收集并显示验证错误 #

最后，我们需要在组件中监听表单控件的状态变化，把验证错误收集起来显示。可以通过注入NgControl来获取组件自身的表单控件实例：

import { NgControl } from '@angular/forms';
import { OnInit } from '@angular/core';

// 在组件构造函数中注入NgControl
constructor(public ngControl: NgControl) {}

ngOnInit(): void {
  // 监听控件状态变化，收集错误信息
  this.ngControl.statusChanges?.subscribe(() => {
    this.errors = [];
    const controlErrors = this.ngControl.errors;
    if (controlErrors) {
      // 把错误对象的值转换为数组，用于显示
      this.errors = Object.values(controlErrors) as string[];
    }
  });
}

这样配置后，当你在父组件中使用：

<styled-input [(ngModel)]="myValue" validationDirective1 validationDirective2 required email ></styled-input>

所有的验证规则（原生属性和自定义指令）都会正常生效，错误信息也会自动显示在组件的<ul>里。

总结一下 #

• 原生验证属性：用@Input()接收后直接绑定到内部input即可。
• 自定义验证指令：让组件实现ControlValueAccessor，指令实现Validator，集成Angular表单系统来联动验证逻辑。

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