Angular中如何通过@ViewChild动态设置表单控件maxLength属性

先推荐更易维护的声明式方案（无需@ViewChild） #

当需要处理15种以上的条件时，最合理的做法是把属性名与最大长度的映射关系放在TypeScript代码中，避免模板里出现复杂的嵌套逻辑：

1. 在组件类中定义映射表和计算属性：

// 假设AttributeName是你的枚举类型
attributeMaxLengthMap: Record<AttributeName, number> = {
  [AttributeName.FIRST_NAME]: 15,
  [AttributeName.LAST_NAME]: 20,
  // 依次添加其他13种属性对应的长度配置
  [AttributeName.DEFAULT]: 255 // 兜底默认值
};

get currentMaxLength(): number {
  return this.attributeMaxLengthMap[this.attribute.attributeName] || this.attributeMaxLengthMap[AttributeName.DEFAULT];
}

2. 模板中直接绑定计算属性：

<input type="text" [formControlName]="name" [maxlength]="currentMaxLength">

这种方式符合Angular的声明式编程思想，代码更易读、易维护，也不需要直接操作DOM。

使用@ViewChild的命令式实现（特殊场景下使用） #

如果确实需要通过@ViewChild操作DOM来设置maxLength，可以按以下步骤实现：

1. 给输入框添加模板引用变量：

<input #dynamicInput type="text" [formControlName]="name">

2. 在组件类中通过@ViewChild获取元素引用，并在属性变化时更新maxLength：

import { ViewChild, ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';

// ...

@ViewChild('dynamicInput', { static: false }) dynamicInput!: ElementRef<HTMLInputElement>;

// 同样先定义映射表
attributeMaxLengthMap: Record<AttributeName, number> = {
  [AttributeName.FIRST_NAME]: 15,
  [AttributeName.LAST_NAME]: 20,
  // 添加其他属性的长度配置
  [AttributeName.DEFAULT]: 255
};

// 监听attribute的变化，更新maxLength
ngOnChanges(changes: SimpleChanges): void {
  if (changes['attribute'] && this.dynamicInput) {
    const targetLength = this.attributeMaxLengthMap[this.attribute.attributeName] || this.attributeMaxLengthMap[AttributeName.DEFAULT];
    this.dynamicInput.nativeElement.maxLength = targetLength;
  }
}

// 初始化时设置初始长度
ngOnInit(): void {
  if (this.dynamicInput) {
    const targetLength = this.attributeMaxLengthMap[this.attribute.attributeName] || this.attributeMaxLengthMap[AttributeName.DEFAULT];
    this.dynamicInput.nativeElement.maxLength = targetLength;
  }
}

注意：直接操作DOM的命令式方式并非Angular的推荐做法，只有当声明式绑定无法满足需求（比如第三方组件不支持属性绑定）时才建议使用。

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