Angular Mat-Chip-Grid输入时（,<）键触发添加事件的修复咨询

Angular Material的MatChipInput组件默认将逗号（,）、回车键作为触发Chip添加的分隔符，这就是你按下M右侧的,<键（逗号键）会触发添加的原因，修复方案如下：

方案1：自定义分隔符，仅保留回车键 #

在模板的mat-chip-input元素上，通过matChipInputSeparatorKeyCodes指定仅回车键为分隔符：

<mat-chip-input
  #chipInput
  [formControl]="fruitCtrl"
  [matChipInputFor]="chipList"
  [matChipInputSeparatorKeyCodes]="[ENTER]"
  (matChipInputTokenEnd)="add($event)"
></mat-chip-input>

组件类中需导入回车键的常量：

import { ENTER } from '@angular/cdk/keycodes';

方案2：在添加事件中手动判断触发键 #

如果需要更灵活的控制，可以在add方法里判断触发事件的按键，仅当是回车键时才执行添加逻辑：

import { ENTER } from '@angular/cdk/keycodes';
import { MatChipInputEvent } from '@angular/material/chips';

// ...

add(event: MatChipInputEvent): void {
  // 仅响应回车键
  if (event.keyCode !== ENTER) {
    return;
  }

  const value = (event.value || '').trim();
  // 执行添加Chip的逻辑
  if (value) {
    this.fruits.push(value);
  }
  // 清空输入框
  event.chipInput!.clear();
  this.fruitCtrl.setValue(null);
}

以上两种方案都能解决按下逗号键误触发Chip添加的问题，根据你的需求选择即可。

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