autocomplete disabled fixed
This commit is contained in:
parent
d2b15a2885
commit
1a0728295b
|
@ -1,10 +1,10 @@
|
|||
<div class="row multiple-auto-complete">
|
||||
<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list">
|
||||
<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list" [disabled]="disabled">
|
||||
<mat-chip *ngFor="let selectedItem of _chipItems()" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
|
||||
{{this._displayFn(selectedItem)}}
|
||||
<mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
<input matInput #textInput autocomplete="off" (focus)="_onInputFocus()" [placeholder]="placeholder" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="_addItem($event)" (click)="_onInputClick($event)" />
|
||||
<input matInput #textInput autocomplete="off" (focus)="_onInputFocus()" [disabled]="disabled" [placeholder]="placeholder" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="_addItem($event)" (click)="_onInputClick($event)" />
|
||||
</mat-chip-list>
|
||||
<mat-progress-spinner mode="indeterminate" class="multi-loading-bar col-auto" [class.not-loading]="!loading" [diameter]="22"></mat-progress-spinner>
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
||||
|
|
|
@ -1,5 +1,14 @@
|
|||
<div class="row auto-complete">
|
||||
<input matInput class="col" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="auto" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [disabled]="disabled" (focus)="_onInputFocus()">
|
||||
<mat-chip-list #chipList [disabled]="disabled">
|
||||
<mat-chip *ngIf="value" [removable]="true" (removed)="chipRemove()">
|
||||
{{_displayFn(value)}}
|
||||
<mat-icon matChipRemove *ngIf="!disabled">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
<input matInput class="col" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="auto" [ngModel]="_inputValue" (ngModelChange)="_inputValueChange($event)" [disabled]="disabled || (value !== null)" (focus)="_onInputFocus()" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true">
|
||||
|
||||
|
||||
</mat-chip-list>
|
||||
|
||||
<mat-progress-spinner mode="indeterminate" [class.not-loading]="!loading" [diameter]="17"></mat-progress-spinner>
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
|
||||
<span *ngIf="_groupedItems">
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { FocusMonitor } from '@angular/cdk/a11y';
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, Self } from '@angular/core';
|
||||
import { ControlValueAccessor, NgControl } from '@angular/forms';
|
||||
import { MatAutocompleteSelectedEvent, MatFormFieldControl } from '@angular/material';
|
||||
|
@ -36,6 +37,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
|
|||
private requestDelay = 200; //ms
|
||||
private minFilteringChars = 1;
|
||||
private loadDataOnStart = true;
|
||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
|
||||
get empty() {
|
||||
return !this._inputValue || this._inputValue.length === 0;
|
||||
|
@ -73,7 +75,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
|
|||
}
|
||||
set value(value: any | null) {
|
||||
this._selectedValue = value;
|
||||
this._inputValue = value;
|
||||
this._inputValue = " ";
|
||||
this.stateChanges.next();
|
||||
}
|
||||
private _selectedValue;
|
||||
|
@ -147,6 +149,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
|
|||
|
||||
_optionSelected(event: MatAutocompleteSelectedEvent) {
|
||||
this._setValue(this.configuration.valueAssign ? this.configuration.valueAssign(event.option.value) : event.option.value);
|
||||
this._inputValue = " ";;
|
||||
this.stateChanges.next();
|
||||
this.optionSelected.emit(event.option.value);
|
||||
}
|
||||
|
@ -212,6 +215,10 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
|
|||
}
|
||||
}
|
||||
|
||||
chipRemove(): void {
|
||||
this.value = null;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.stateChanges.complete();
|
||||
this.fm.stopMonitoring(this.elRef.nativeElement);
|
||||
|
|
Loading…
Reference in New Issue