角垫片，使用空间和选项卡进入新输入

Question

实际上，在mat-chip中，我们需要按

Enter

才能在列表中添加一个新元素。 我想拥有

space

，

comma

和

tab

具有相同的效果。

这怎么办？

这里是代码：

<mat-form-field>
  <mat-label>{{ 'EMAILS' | translate}}</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter email" formControlName="emails">
    @for (keyword of keywords$(); track keyword) {
    <mat-chip-row (removed)="removeKeyword(keyword)">
      {{keyword}}
      <button matChipRemove aria-label="'remove ' + keyword">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
    }
  </mat-chip-grid>

  <input
    [placeholder]="'EMAIL' | translate"
    [matChipInputFor]="chipGrid"
    (matChipInputTokenEnd)="add($event)"
  />
</mat-form-field>

thx @javaa发表评论，可以通过

[matChipInputSeparatorKeyCodes]="separatorKeys"

Answer 1

这里是代码

import { COMMA, ENTER, SPACE, TAB } from '@angular/cdk/keycodes';
  
separatorKeys = [ENTER, COMMA, SPACE, TAB];

<input
  [matChipInputSeparatorKeyCodes]="separatorKeys" <!-- <-- Here --> -->
  [placeholder]="'EMAIL' | translate"
  [matChipInputFor]="chipGrid"
  (matChipInputTokenEnd)="add($event)"
/>