mat-icon-button matSuffix in field password always refresh when click


I want to ask about mat-icon-button matSuffix in angular
actually this is my first time I learning angular and try to create a login page,
and I got some problem in password field

I used mat-icon-button matSuffix, every time I click on icon hide or show password the page always refresh and all fields back to empty again

here is my code

<div class="form-field">
  <mat-form-field class="field-full-width" appearance="fill">
    <mat-label>Enter your password</mat-label>
    <input matInput [type]="hide ? 'password' : 'text'" />
      (click)="hide = !hide"
      [attr.aria-label]="'Hide password'"
      <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>

I copied from angular website. The code running well it that site, but not in my code

this my angular version
enter image description here


The issue is that a button tag’s default behavior is to perform a form submit…

You should add type="button" and it will stop refreshing.


Answered By – The Fabio

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.