1

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.

1 Answer 1

6

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="yourname@domain.com"
        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>
1
  • 1
    This is an excelent explanation! Worked for me Jan 2, 2022 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.