如何获取Angular FormControl中Validators.max()的设定值

子组件TypeScript代码 #

首先在子组件中定义@Input接收父组件传入的FormControl，再通过getter方法从验证器中提取max设定值：

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-quantity-control',
  templateUrl: './quantity-control.component.html'
})
export class QuantityControlComponent {
  @Input() quantityControl!: FormControl;

  // 提取FormControl中Validators.max的设定值
  get maxAllowedValue(): number | null {
    // 处理验证器是单个函数或数组的情况
    const validators = Array.isArray(this.quantityControl.validator) 
      ? this.quantityControl.validator 
      : this.quantityControl.validator ? [this.quantityControl.validator] : [];

    // 遍历找到max验证器
    const maxValidator = validators.find(v => typeof v === 'function' && (v as any).name === 'max');
    
    // 返回max值，找不到则返回null
    return maxValidator ? (maxValidator as any).arguments[0] : null;
  }
}

子组件模板代码 #

在按钮的[disabled]属性中直接比较当前FormControl的值和提取到的max值：

<button
  mat-flat-button
  color="accent"
  [disabled]="quantityControl.value === maxAllowedValue"
  (click)="increaseQuanity()"
>+</button>

说明 #

这种实现无需额外通过@Input传递最大值，直接从传入的FormControl中解析验证器配置，既保持了组件的封装性，又避免了重复传递参数。如果FormControl的验证器后续动态变更，getter会自动响应变更检测，更新max值。

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