How can I stop the password input field from changing its style when I toggle on using material icon-CodePudding

<div >
<mat-hint *ngIf=""></mat-hint>
   <input [type]="hide ? 'password': 'text'" formControlName="password" id="password" 
    type="password"  placeholder="Password" required/>
<mat-icon id="eye" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</div>

I'm building a login form that makes the password visible when the icon is toggled on and off. The images below show the display before and after the toggle. I have only just positioned the icon within the input field.

CodePudding user response：

Remove [type] from Input. That way, [type] is not updated when you toggle the visibility icon.

<input [type]="hide ? 'password': 'text'" formControlName="password" id="password"

becomes

<input formControlName="password" id="password"

CodePudding user response：

add autocomplete="new-password" to input

<div >
<mat-hint *ngIf=""></mat-hint>
   <input [type]="hide ? 'password': 'text'" formControlName="password" autocomplete="new-password"
id="password" type="password"  placeholder="Password" required/>
<mat-icon id="eye" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</div>