Angular 自动完成功能似乎无法正常工作
Angular Autocomplete doesn't seem to work right
我正在尝试使用具有自动完成功能的输入来执行以下表单,但我希望用户只能 select 自动完成列表中的项目,但可以搜索到 select:
<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" class="col-4">
<input class="search" type="text" matInput formControlName="codename" placeholder=" {{'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 上)并不总是被触发,而更改事件(在输入上)总是被触发。
有什么想法吗?有没有办法让点击优先于更改?
提前致谢
由于您使用的是反应式表单,我建议您监听表单控件 valueChanges 事件,只要选择一个选项就会触发该事件。
ngOnInit() {
this.myForm.get('codename').valueChanges.subscribe( val => console.log(val));
}
我正在尝试使用具有自动完成功能的输入来执行以下表单,但我希望用户只能 select 自动完成列表中的项目,但可以搜索到 select:
<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" class="col-4">
<input class="search" type="text" matInput formControlName="codename" placeholder=" {{'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 上)并不总是被触发,而更改事件(在输入上)总是被触发。
有什么想法吗?有没有办法让点击优先于更改?
提前致谢
由于您使用的是反应式表单,我建议您监听表单控件 valueChanges 事件,只要选择一个选项就会触发该事件。
ngOnInit() {
this.myForm.get('codename').valueChanges.subscribe( val => console.log(val));
}