Angular 8 material 个筹码。只允许用户添加 1 个芯片

Question

I'm trying to make so users can only choose one chip in my angular material chip list.

当我开始输入时，一个进程会转到后端并根据输入的内容检索选项列表

我已经尝试使用 [multiple] = false，正如文档所建议的，https://material.angular.io/components/chips/api 但我仍然能够 select 多个结果。

<mat-form-field class="double-field" appearance="outline">
            <mat-label>{{translations.companyLbl}}</mat-label>
            <mat-chip-list #companyChip [multiple]="multiple">
              <mat-chip *ngFor="let company of companiesLoaded" [selectable]="selectable" [removable]="removable"
                (removed)="removeCompanyChip(company)">
                {{company.Name}}
                <mat-icon matChipRemove *ngIf="companyLocked">cancel</mat-icon>
              </mat-chip>
              <input placeholder="Choose a company" #companyInput [formControl]="companyControl" formControlName="Company"
                [matAutocomplete]="companyAutocomplete" [matChipInputFor]="companyChip"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" />
            </mat-chip-list>
            <mat-autocomplete #companyAutocomplete="matAutocomplete" (optionSelected)="selectedCompanyChip($event)">
              <mat-option *ngFor="let company of filteredCompanies | async" [value]="company">
                {{ company.Name }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

用户只能选择一个结果。

Answer 1

首先将此添加到您的芯片输入标签

<input (matChipInputTokenEnd)="add($event)">

在你的添加函数中编写逻辑

add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    // Add your company if array's length is 0
    if (this.companiesLoaded.length === 0) {
      this.companiesLoaded.push(value.trim());

    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

Angular 8 material 个筹码。只允许用户添加 1 个芯片

Angular 8 material chips. Only allow user to add 1 chip

angular-material2

angular