我想打开Mat-Select Drop down,如果我按下Tab键来自上一个字段,或者按下Shift + Tab,如果我来自下拉列表后的下一个字段,则可以打开它们。如何实现呢?
现在,如图所示,“帐户类型”是“我的Mat-Select”下拉列表。因此,如果我从“帐户名称”焦点按Tab键,将切换到“帐户类型”,但我想打开“下拉列表”。就像Wise,如果我按公司的Shift + Tab键组合,我想打开“帐户类型的下拉”。
我经历了所有的Angular Material Select API,但无法实现我的目标。
这是我的帐户类型下拉代码-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-label-line-height">
<mat-label>Account Type </mat-label>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<mat-form-field>
<mat-select formControlName="AccountTypeCode" [disabled]="this.DataService.LeaseCount" [(ngModel)]="AccountModel.AccountTypeCode">
<mat-option *ngFor="let AccountType of this.AccountTypeList" [value]="AccountType.Code">
{{ AccountType.Name }}
</mat-option>
</mat-select>
<mat-error *ngIf="hasError('AccountTypeCode', 'required')">Account Type is required</mat-error>
<mat-error *ngIf="hasError('CompanyCode', 'min')">Account Type is required</mat-error>
</mat-form-field>
</div>
</div>
到目前为止,我已经尝试过-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-label-line-height">
<mat-label>Account Type </mat-label>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<mat-form-field>
<mat-select (open)="matSelectOpen($event)" formControlName="AccountTypeCode" [disabled]="this.DataService.LeaseCount" [(ngModel)]="AccountModel.AccountTypeCode">
<mat-option *ngFor="let AccountType of this.AccountTypeList" [value]="AccountType.Code">
{{ AccountType.Name }}
</mat-option>
</mat-select>
<mat-error *ngIf="hasError('AccountTypeCode', 'required')">Account Type is required</mat-error>
<mat-error *ngIf="hasError('CompanyCode', 'min')">Account Type is required</mat-error>
</mat-form-field>
</div>
</div>
在.ts文件中-
matSelectOpen(e) {
Console.log(e); //just to check whether function is called or not
}
我也尝试了以下事件:-
(trigger)=“ matSelectOpen($ event)”
(panelOpen)=“ matSelectOpen($ event)”
任何帮助,将不胜感激。
尝试这个
<mat-select #accType (focus)="accType.open()">
这意味着给您选择的模板参考。然后重点打开它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句