argos/dmp-frontend/src/app/shared/components/autocompleteChips/autocompleteChips.component...

21 lines
1.1 KiB
HTML

<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let item of selectedItems" (remove)="remove(item)">
{{item.label}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input matInput [matAutocomplete]="auto" [matChipInputFor]="chipList" [formControl]="control" placeholder="{{placeholder}}" [required]="required">
</mat-chip-list>
<mat-error *ngIf="control.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith.bind(this)" (optionSelected)="this.optionSelected($event)">
<mat-option *ngFor="let item of filteredItems " [value]="item">
<span *ngIf="titleKey">{{item[titleKey]}}</span>
<span *ngIf="subtitleKey">{{item[subtitleKey]}}</span>
</mat-option>
<!-- <mat-option *ngIf="filteredItems.length == 0" value="das">
<span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span>
</mat-option> -->
</mat-autocomplete>
</mat-form-field>