将 tabindex 设置为 angular material 元素

Question

我有一个使用 angular material 创建的密码字段。那里有一个密码可见性切换按钮。如果它是一个简单的按钮，我可以设置 tabindex="-1"，但 tabindex 不适用于“mat-pass-toggle-visibility”

                  <mat-form-field appearance="fill" style="width: 100%;" class="input-custo-design">
                    <mat-label>Password</mat-label>
                    <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>

                    <input matInput [type]="toggle.type" placeholder="Password" formControlName="pass" #passwordWithValidation />
                    <mat-error *ngIf="signupController.pass.errors?.required">Password is required
                    </mat-error>
                   
                  </mat-form-field>

我得到了一个 github link mat-password，这个问题是存在的，但目前我能以某种方式解决这个问题吗？？

在 chrome 开发工具中我可以看到“mat-pass-toggle-visibility”最终只创建了一个按钮。那么我们可以设置任何指令或类似的东西吗？

Answer 1

对于我的用例，我有另一种解决方法：使用普通按钮 class

<mat-form-field appearance="fill" style="width: 100%;" class="input-custo-design">
  <mat-label>Password</mat-label>
  <input matInput [type]="hideSignUp ? 'password' : 'text'" placeholder="Password" formControlName="pass" #passwordWithValidation />
                    
  <button
   type="button"
   mat-icon-button
   matSuffix
   (click)="hideSignUp = !hideSignUp"
   [attr.aria-label]="'Hide password'"
   [attr.aria-pressed]="hide"
   tabindex="-1"
 >
 <mat-icon>{{
   hideSignUp ? "visibility_off" : "visibility"
 }}</mat-icon>
 </button>
 <mat-error *ngIf="signupController.pass.errors?.required">Password is required</mat-error>
</mat-form-field>

Answer 2

此 pull request 添加了指定 tabindex 的功能。

将 tabindex 设置为 angular material 元素

setting tabindex to angular material element

html

tabindex

angular-material

angular