我有一个使用角形材料创建的密码字段。那里有一个密码可见性切换按钮。如果它是一个简单的按钮,我可以设置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链接mat-password,这里有这个问题,但是目前有某种办法可以解决吗?
在chrome dev-tools中,我可以看到“ mat-pass-toggle-visibility”最终仅创建了一个按钮。所以我们可以设置任何指令或类似的东西。
对于我的用例,我有另一种解决方法:使用常规按钮类
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句