问题描述
我在 Angular 项目中有自定义的 Mat Auto Complete。它有 2 个后缀,Clear 和 Dropdown 按钮。当我点击清除按钮代码 this.myControl.reset('',{ emitEvent: true });
重置输入值。但是下拉面板没有打开。我尝试使用以下格式,但没有任何效果
- this.myControl.reset();
- this.myControl.reset('',{ emitEvent: true });
- this.myControl.patchValue('');
autocomplete-display-example.ts
.......
clearinput() {
this.arrowIcon = "arrow_drop_down";
this.myControl.reset('',{ emitEvent: true });
}
......
autocomplete-display-example.html
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Assignee</mat-label>
<input
type="text"
matInput
[formControl]="myControl"
[matAutocomplete]="auto"
/>
<div matSuffix style="display:flex">
<button
*ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
mat-icon-button
aria-label="Clear"
(click)="clearinput()"
type="button"
>
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button aria-label="Clear" type="button">
<mat-icon>{{arrowIcon}}</mat-icon>
</button>
</div>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
(closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
<!-- copyright 2020 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
解决方法
好的,当我点击清除图标时,它会重置表单控件并关闭面板。为了解决这个问题,我们可以手动打开面板。将 MatAutocompleteTrigger
与 event
查看更新的StackBlitz Demo。
openPanel(evt: any,trigger: MatAutocompleteTrigger): void {
evt.stopPropagation();
this.myControl?.reset();
trigger.openPanel();
this.inputAutoComplete?.nativeElement.focus();
}
将 #trigger="matAutocompleteTrigger"
添加到输入并将其传递给按钮 click()
方法
autocomplete-display-example.html
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Assignee</mat-label>
<input #inputAutoComplete
[formControl]="myControl"
[matAutocomplete]="auto"
#trigger="matAutocompleteTrigger"
matInput
type="text"
/>
<div matSuffix style="display:flex">
<button
(click)="openPanel($event,trigger)"
*ngIf=" myControl?.value!==null && myControl?.value!==''"
aria-label="Clear"
mat-icon-button
type="button"
>
<mat-icon>clear</mat-icon>
</button>
<button aria-label="Clear" mat-icon-button type="button">
<mat-icon>{{arrowIconSubject.getValue()}}</mat-icon>
</button>
</div>
<mat-autocomplete #auto="matAutocomplete" (closed)="arrowIconSubject.next('arrow_drop_down')"
(opened)="arrowIconSubject.next('arrow_drop_up')" (optionSelected)="arrowIconSubject.next('arrow_drop_down')"
[displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async " [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>