Angular reactive form- 2 password type input - second does not respond to hide unhide button click - angular-reactive-forms

Question

This page is loaded when the user clicks on the link received in email to reset the password.
This is a password reset form. It has two input fields - new password and confirm password. Both the input fields have icon-buttons to hide/unhide the input password string. When any of these icon buttons is clicked, the boolean variable hide reverses its value.
(click)="hide = !hide" type="button"
Both the input fields type is defined as: [type]="hide ? 'password' : 'text'"
When the form is loaded for the first time, without any input in the first password input field, both the icon-buttons respond to clicks.
Notice the text true or false next to icons. These are just for testing the value of the variable 'hide'.
Issues:
In the picture the password is entered in the first input with less than 8 characters, so it displays the error about length. But even after 8 characters are types the error does not go. Sometimes even the of the second input does not float up while entering the string in the second input.
After entering value in first input, when any of the the hide/unhide button icons is clicked only the first input responds to the clicks(or changes the input type). The value of 'hide' is changed to false in first input ONLY but not in second - WHY?
component.ts
hide = true;
// in ngOnInit
this.form = this.formBuilder.group({
password: ['', [Validators.required, Validators.minLength(8)]],
confirmPassword: ['', Validators.required],
}, {
validator: MustMatch('password', 'confirmPassword')
});
template:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<mat-form-field class="mt-1r">
<mat-label>New Password</mat-label>
<input matInput formControlName="password" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" type="button">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> {{hide}}
</button>
<mat-hint>Min 8 characters</mat-hint>
<mat-error *ngIf="form.get('password').errors.required">Password is required</mat-error>
<mat-error *ngIf="form.get('password').errors.minlength">Password must be at least 8 characters long</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="mt-1r">
<mat-label>Confirm Password</mat-label>
<input matInput formControlName="confirmPassword" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" type="button">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> {{hide}}
</button>
<mat-error *ngIf="form.get('confirmPassword').errors.required">Confirm Password is required</mat-error>
</mat-form-field>
</div>
<div class="mt-1r">
<button type="submit" mat-raised-button color="primary" class="mr-1r">Reset Password</button>
<button type="button" mat-raised-button color="warn" routerLink='/'>Cancel</button>
</div>
</form>

Answer 1

sorry if I don t get your problem right. I hope this cold help with mat-icon problem. Try this and let me know.
source:
https://material.angular.io/components/form-field/examples
<div class="example-container">
<mat-form-field 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>
<mat-form-field appearance="fill" floatLabel="always">
<mat-label>Amount</mat-label>
<input matInput type="number" class="example-right-align" placeholder="0">
<span matPrefix>$ </span>
<span matSuffix>.00</span>
</mat-form-field>
</div>