如何在Angular中自定义支持多选的输入型chips组件

核心逻辑为新增数组存储已选选项，选中后不填充输入框而是将选项存入数组，清空输入框支持后续继续选择，同时在输入区域前置渲染已选的Chips标签。 #

1. TypeScript代码修改 #

新增属性存储已选Chips #

在组件类的属性声明部分新增存储已选选项的数组：

// 原有属性保留，新增以下内容
selectedChips: any[] = [];

修改选中逻辑&新增删除方法 #

替换原有selectValue方法，新增删除Chips的方法：

selectValue(value) {
  // 可选：添加去重逻辑，避免重复选择同一项
  const existed = this.selectedChips.find(item => 
    item[this.propertyValueToShow] === value[this.propertyValueToShow]
  );
  if (!existed) {
    this.selectedChips.push(value);
  }
  // 清空输入框，支持继续搜索下一个选项
  this.stateForm.patchValue({ search: null });
  this.showDropDown = false;
}

// 新增删除指定Chips的方法
removeChip(index: number) {
  this.selectedChips.splice(index, 1);
}

2. 模板HTML代码修改 #

在表单内输入框前新增已选Chips的渲染区域：

<form [formGroup]='stateForm' autocomplete="new-password" novalidate autocomplete="off">
  <!-- 新增已选Chips渲染区域 -->
  <div class="chips-wrap">
    <span class="chip-tag" *ngFor="let chip of selectedChips; let idx = index">
      {{ chip[propertyValueToShow] }}
      <i class="fa fa-times" (click)="removeChip(idx)"></i>
    </span>
  </div>
  <input id='search' placeholder="Search for a state" formControlName='search' (click)=' openDropDown() '
    class='input-underline search-bar' type='text'>
</form>

3. 可选：补充基础样式（SCSS示例） #

给Chips添加基础展示样式，可根据业务需求自定义：

.chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f0f0f0;
  border-radius: 20px;
  font-size: 14px;
}
.chip-tag .fa-times {
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

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