[Fixed] angular reactive forms – changing input type triggers forms validation

Issue

I have a simple registration form made with Angular 11.2.7 and Angular Material. Here’s the stackblitz.

I made changing the password fields visibility to last 3 sec and then their state changes back to "password". So when user clicks on an "eye" in any of the password controls, the password text shows in clear text and then changes back to dots in 3 sec.

But the problem this state change triggers the whole form validation and all that are invalid gets "invalid" look (get red). Can anyone please tell me why?

Also, I had to use multicasting for my Observables which I might not done right. I’m not sure.

Solution

Hi the problem is that a button without any defined type in a form acts like a submit button for the form and the required fields will show error. Just add type='button' to button labels.

form [formGroup]="frm">
  <div class="example-container">
    <mat-form-field appearance="fill">
      <mat-label>Email</mat-label>
      <input
        type="email"
        matInput
        placeholder="[email protected]"
        formControlName="email"
        required
      />
      <mat-error *ngIf="isTouchedAndInvalid('email')">{{ getErrorMessage("email") }}</mat-error>
    </mat-form-field>
  </div>
  <div class="example-container">
    <mat-form-field appearance="fill">
      <mat-label>Enter your password</mat-label>
      <input matInput [type]="(passwordType$ | async)!" />
      <button
        mat-icon-button
        matSuffix
        (click)="showPassword()"
        [attr.aria-label]="'Hide password'"
        type='button'
      >
        <mat-icon>{{ hidePassVisibility$ | async }}</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Confirm password</mat-label>
      <input matInput [type]="(passwordType$ | async)!" />
      <button
        mat-icon-button
        matSuffix
        (click)="showPassword()"
        [attr.aria-label]="'Hide password'"
        type='button'
      >
        <mat-icon>{{ hidePassVisibility$ | async }}</mat-icon>
      </button>
    </mat-form-field>
  </div>
</form>