Angular Autocomplete работает некорректно

Я пытаюсь создать следующую форму с вводом с автозаполнением, но я бы хотел, чтобы пользователь мог выбирать только элементы в списке автозаполнения, но с возможностью поиска элемента для выбора:

<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" class="col-4">
   <input class="search" type="text" matInput formControlName="codename" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{'placeholder.search'|translate}}" (click)="searchStation()" [matAutocomplete]="tclstation" (change)="validateSelectedStation($event.target.value)">
</mat-form-field>
<mat-autocomplete class="col-4" #tclstation="matAutocomplete">
   <mat-option *ngFor="let item of filteredListStations | async" [value]="item.codename" (click)="onChangeStation(item.stationcode, item.stationname, item.codename)">{{item.codename}}</mat-option>
</mat-autocomplete>

Проблема в том, что при фильтрации автозаполнения не всегда запускается событие щелчка (на mat-option) и всегда запускается событие изменения (при вводе).

Есть идеи по этому поводу? Есть ли способ сделать ставку на клики важнее изменений?

заранее спасибо


angular mat-autocomplete
person Pedro Ramírez Pérez    schedule 17.12.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы используете реактивные формы, я бы посоветовал вам прослушать элемент управления формой valueChanges событие, которое будет запускаться всякий раз, когда выбирается опция.

ngOnInit() {  
   this.myForm.get('codename').valueChanges.subscribe( val => console.log(val));
}
person Amit Chigadani    schedule 17.12.2019