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

Issue

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'" />
    <button
      mat-icon-button
      matSuffix
      (click)="hide = !hide"
      [attr.aria-label]="'Hide password'"
      [attr.aria-pressed]="hide"
    >
      <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
    </button>
  </mat-form-field>
</div>

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

Solution

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.

<button
      type="button"
      mat-icon-button
...

Answered By – The Fabio

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.