Angular自定义表单控件如何获取验证参数值？

核心思路 #

Angular的内置验证器（比如Validators.max）会把参数值自动存在表单控件的errors对象里，完全不用额外通过@Input()传递，直接从错误信息里读就行。

具体实现步骤 #

1. 注入NgControl拿到当前表单控件
   在自定义组件里通过依赖注入获取关联的表单控件实例，这样就能访问它的错误状态：

   import { Component, Optional, Self } from '@angular/core';
   import { ControlValueAccessor, NgControl } from '@angular/forms';
   
   @Component({
     selector: 'app-custom-number-input',
     templateUrl: './custom-number-input.component.html'
   })
   export class CustomNumberInputComponent implements ControlValueAccessor {
     // 注入NgControl，@Self()确保只取当前组件自己的控件实例
     constructor(@Optional() @Self() public ngControl: NgControl) {
       if (this.ngControl) {
         this.ngControl.valueAccessor = this;
       }
     }
   
     // 实现ControlValueAccessor的必备方法
     writeValue(value: number): void { /* 实现赋值逻辑 */ }
     registerOnChange(fn: (value: number) => void): void { /* 实现值变更回调 */ }
     registerOnTouched(fn: () => void): void { /* 实现触摸回调 */ }
     setDisabledState(isDisabled: boolean): void { /* 实现禁用状态切换 */ }
   }
   

2. 从errors里提取max参数值
   当max验证失败时，控件的errors对象里会有一个max属性，包含设置的最大值和当前输入值，直接在模板里用就行：

   <input type="number" (input)="onInputChange($event)" (blur)="onTouched()">
   <!-- 显示错误提示 -->
   <div class="error-message" *ngIf="ngControl.control?.hasError('max')">
     输入值不能超过 {{ ngControl.control.getError('max').max }}，当前输入为 {{ ngControl.control.getError('max').actual }}
   </div>
   

3. 自定义验证器的情况
   如果是你自己写的带参数验证器，只要返回错误对象时带上参数值，同样能这么用：

   import { AbstractControl, ValidationErrors } from '@angular/forms';
   
   // 自定义最大值验证器
   export function customMaxValidator(max: number) {
     return (control: AbstractControl): ValidationErrors | null => {
       if (control.value > max && control.value != null) {
         return {
           customMax: {
             max: max,
             actual: control.value
           }
         };
       }
       return null;
     };
   }
   

   模板里对应的写法：

   <div *ngIf="ngControl.control?.hasError('customMax')">
     不能大于 {{ ngControl.control.getError('customMax').max }}
   </div>
   

什么时候用@Input()？ #

只有当组件本身需要把这个参数用于其他逻辑（比如限制输入框的最大值属性），同时还要作为验证器参数时，才需要用@Input()传递。这种情况要注意同步参数和验证器：

import { Component, Input, OnInit, Optional, Self } from '@angular/core';
import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-custom-number-input',
  templateUrl: './custom-number-input.component.html'
})
export class CustomNumberInputComponent implements ControlValueAccessor, OnInit {
  @Input() max: number;

  constructor(@Optional() @Self() public ngControl: NgControl) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
  }

  ngOnInit(): void {
    if (this.ngControl && this.max != null) {
      // 把Input的max值传给验证器
      this.ngControl.control.setValidators(Validators.max(this.max));
      this.ngControl.control.updateValueAndValidity();
    }
  }

  // ... 其他ControlValueAccessor方法
}

总结 #

• 优先用NgControl从控件的errors对象里拿验证器参数，这是Angular表单API原生支持的方式，最省心。
• @Input()是备选，只适合组件内部逻辑和验证器参数强绑定的场景。

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