<mat-form-field class="password-input">
  <mat-label>{{label}}</mat-label>

  <input matInput [type]="hide ? 'password' : 'text'" [formControl]="formControlComponent"
         [errorStateMatcher]="matcher">

  <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide">
    <mat-icon  color="accent">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>

  <mat-error *ngIf="formControlComponent.hasError('minlength') && !formControlComponent.hasError('required')"
             >Password must be longer</mat-error>

  <mat-error *ngIf="formControlComponent.hasError('required')">Password is required</mat-error>

  <mat-error *ngIf="formControlComponent.hasError('notSame')">Passwords do not match</mat-error>

</mat-form-field>
