установка tabindex на angular материальный элемент - PullRequest
Новая
       131

установка tabindex на angular материальный элемент

0 голосов
/ 07 августа 2020

У меня есть поле пароля, созданное с использованием материала angular. и там есть кнопка переключения видимости пароля. если бы это была простая кнопка, я мог бы установить 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>

enter image description here

i got a github link mat- пароль , где есть эта проблема, но в настоящее время есть какое-то решение?

в chrome dev-tools я вижу, что "mat-pass-toggle-visibility" делает в конец создать только кнопку. так что можем мы установить любую директиву или что-то подобное.

1 Ответ

0 голосов
/ 07 августа 2020

для моего варианта использования у меня есть другой способ: использовать обычный класс кнопок 

<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>
...