Question

如果要从下拉列表后的上一个字段中按Tab键，或者在从下拉列表后的下一个字段中来时按Shift + Tab，则我想打开Mat-Select Drop down。如何实现呢？

现在，如图中所示-帐户类型是我的Mat-Select下拉列表。因此，如果我从“帐户名称”焦点按Tab键，将切换到“帐户类型”，但我想打开“下拉列表”。就像Wise，如果我要按公司的Shift + Tab键组合，我想打开“帐户类型的下拉”。

我经历了所有Angular Material Select API's，但无法实现自己的目标。

这是我的帐户类型下拉代码-

<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）”

任何帮助将不胜感激。

Answer 1

尝试

 <mat-select #accType (focus)="accType.open()">

这意味着给您选择的模板参考。然后重点打开它。

打开Mat-Select当焦点位于Mat-Select上时，在Angular中下拉

1 个答案: