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

克鲁纳尔·沙(Krunal Shah)

我想打开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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

为什么打开 mat 对话框时所有 mat 单选按钮都被选中?

来自分类Dev

打开焦点上的html select选项

来自分类Dev

打开CV Mat结构坐标

来自分类Dev

如何在另一个 mat-autocomplete 的“optionSelected”事件上打开 mat-autocomplete 面板?

来自分类Dev

为什么不能选择mat-select的mat-option?

来自分类Dev

当面板的表单组无效时,如何打开mat-expansion-panel?

来自分类Dev

Angular:使用mat-select-filter并在过滤器字段中添加图标的搜索功能的多个mat-select下拉列表

来自分类Dev

bs-select (angular-strap) 下拉菜单在页面加载时默认打开

来自分类Dev

mat-theme不适用于mat-select选项和mat-datepicker

来自分类Dev

如何在python中打开Mat文件

来自分类Dev

mat-select selectionChange 获取组角度

来自分类Dev

一旦在Angular 8中选择了Mat-Table,就禁用Mat-Select选项

来自分类Dev

折叠时如何在mat-select中更改文本?

来自分类Dev

使用 ViewEncapsulation.None 打开不同对话框时,Mat-Dialog 样式会发生变化

来自分类Dev

Select2打开焦点集中的下拉菜单

来自分类Dev

当窗口菜单位于标题栏中时,如何设置焦点单击以不打开菜单?

来自分类Dev

根据选择的mat-select值对mat-table进行排序

来自分类Dev

角度指令-ElementRef-无法从mat-form-field中选择mat-select

来自分类Dev

Mat-option出现在页面底部,而不是出现在mat-select下

来自分类Dev

如何为Mat-Select下拉列表动态添加过滤后的值

来自分类Dev

将阵列移至Mat并使用打开的CV显示图像

来自分类Dev

Matlab从“ .mat”文件中“加载”图形对象打开绘图窗口

来自分类Dev

开箱即用时如何关闭Mat-select Panel?

来自分类Dev

Mat-Select不应用默认设计模式

来自分类Dev

如何还原特定选项的Mat-Select的选定值?

来自分类Dev

如何显示基于Mat-Select选项的输入框

来自分类Dev

从模板中选择 mat-select 的初始值

来自分类Dev

是否可以将 cdkDrag 放入 mat-select 中?

来自分类Dev

在mat-select中选择一个值会导致尝试“ diff”时出错

Related 相关文章

  1. 1

    为什么打开 mat 对话框时所有 mat 单选按钮都被选中?

  2. 2

    打开焦点上的html select选项

  3. 3

    打开CV Mat结构坐标

  4. 4

    如何在另一个 mat-autocomplete 的“optionSelected”事件上打开 mat-autocomplete 面板?

  5. 5

    为什么不能选择mat-select的mat-option?

  6. 6

    当面板的表单组无效时,如何打开mat-expansion-panel?

  7. 7

    Angular:使用mat-select-filter并在过滤器字段中添加图标的搜索功能的多个mat-select下拉列表

  8. 8

    bs-select (angular-strap) 下拉菜单在页面加载时默认打开

  9. 9

    mat-theme不适用于mat-select选项和mat-datepicker

  10. 10

    如何在python中打开Mat文件

  11. 11

    mat-select selectionChange 获取组角度

  12. 12

    一旦在Angular 8中选择了Mat-Table,就禁用Mat-Select选项

  13. 13

    折叠时如何在mat-select中更改文本?

  14. 14

    使用 ViewEncapsulation.None 打开不同对话框时,Mat-Dialog 样式会发生变化

  15. 15

    Select2打开焦点集中的下拉菜单

  16. 16

    当窗口菜单位于标题栏中时,如何设置焦点单击以不打开菜单?

  17. 17

    根据选择的mat-select值对mat-table进行排序

  18. 18

    角度指令-ElementRef-无法从mat-form-field中选择mat-select

  19. 19

    Mat-option出现在页面底部,而不是出现在mat-select下

  20. 20

    如何为Mat-Select下拉列表动态添加过滤后的值

  21. 21

    将阵列移至Mat并使用打开的CV显示图像

  22. 22

    Matlab从“ .mat”文件中“加载”图形对象打开绘图窗口

  23. 23

    开箱即用时如何关闭Mat-select Panel?

  24. 24

    Mat-Select不应用默认设计模式

  25. 25

    如何还原特定选项的Mat-Select的选定值?

  26. 26

    如何显示基于Mat-Select选项的输入框

  27. 27

    从模板中选择 mat-select 的初始值

  28. 28

    是否可以将 cdkDrag 放入 mat-select 中?

  29. 29

    在mat-select中选择一个值会导致尝试“ diff”时出错

热门标签

归档