AG Grid：限制列筛选器中用户可输入的字符数量

allowedCharPattern是用于单元格编辑器的配置项，对筛选器输入框无效；单元格编辑器也不会作用于筛选器，所以你需要通过以下两种方式实现筛选器输入字符数限制：

方案一：自定义筛选器组件（推荐，适配Angular） #

创建自定义筛选器组件，直接在输入框上添加maxlength属性，并实现AG Grid的筛选器接口：

1. 自定义筛选器组件代码 #

import { Component } from '@angular/core';
import { IFilterAngularComp, IFilterParams } from 'ag-grid-angular';

@Component({
  template: `
    <input 
      type="text" 
      [(ngModel)]="filterText"
      maxlength="5"
      (input)="triggerFilter()"
      placeholder="输入筛选内容（最多5字符）"
      class="ag-filter-filter"
    />
  `,
  styles: [`
    input { width: 100%; padding: 4px; box-sizing: border-box; }
  `]
})
export class MaxLengthTextFilter implements IFilterAngularComp {
  private params!: IFilterParams;
  filterText = '';

  agInit(params: IFilterParams): void {
    this.params = params;
  }

  isFilterActive(): boolean {
    return this.filterText.trim().length > 0;
  }

  doesFilterPass({ data }: { data: any }): boolean {
    const fieldValue = data[this.params.colDef.field]?.toString().toLowerCase() || '';
    return fieldValue.includes(this.filterText.toLowerCase());
  }

  getModel(): { filterText: string } {
    return { filterText: this.filterText };
  }

  setModel(model: { filterText?: string }): void {
    this.filterText = model?.filterText || '';
    this.triggerFilter();
  }

  private triggerFilter(): void {
    this.params.filterChangedCallback();
  }
}

2. 配置列定义 #

在列定义中指定使用自定义筛选器：

columnDefs = [
  {
    field: 'yourFieldName',
    filter: MaxLengthTextFilter, // 绑定自定义筛选器
    headerName: '目标列'
    // 其他列配置
  }
];

3. 模块注册 #

在Angular模块中声明该组件，并导入AG Grid的FilterModule：

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { MaxLengthTextFilter } from './max-length-text-filter.component';

@NgModule({
  declarations: [MaxLengthTextFilter],
  imports: [
    AgGridModule.withComponents([MaxLengthTextFilter])
  ]
})
export class YourModule { }

方案二：修改默认筛选器输入框（轻量方案） #

通过监听筛选器打开事件，获取默认筛选器的输入框并添加长度限制：

onGridReady(gridParams: any) {
  // 监听筛选器打开事件
  gridParams.api.addEventListener('filterOpened', (event: any) => {
    // 指定目标列的字段名
    const targetField = 'yourFieldName';
    const filterInstance = gridParams.api.getFilterInstance(targetField);
    
    if (!filterInstance) return;
    
    const inputElement = filterInstance.getGui().querySelector('input.ag-filter-filter');
    if (inputElement) {
      // 设置最大输入长度
      inputElement.maxLength = 5;
      // 额外处理输入溢出（maxlength已限制，此为兜底）
      inputElement.addEventListener('input', () => {
        if (inputElement.value.length > 5) {
          inputElement.value = inputElement.value.slice(0, 5);
          filterInstance.onFilterChanged();
        }
      });
    }
  });
}

关键说明 #

• 方案一适合需要自定义筛选器样式、逻辑的场景，扩展性更强
• 方案二适合快速修改默认筛选器，无需额外组件开发
• 确保列定义中filter属性配置正确：默认筛选器为'agTextColumnFilter'，自定义筛选器则替换为组件类

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