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,但我仍然可以选择多个结果。
<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>
用户只能选择一个结果。
答案 0 :(得分:2)
首先将其添加到您的芯片输入标签
<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 = '';
}
}