当我尝试单击密码显示和隐藏图标时，所有表单字段均显示验证

如何解决当我尝试单击密码显示和隐藏图标时，所有表单字段均显示验证

<pre>

    <mat-form-field>
          <mat-label>Enter your password</mat-label>
          <input
            matInput
            [type]="hide ? 'password' : 'text'"
            formControlName="password"
            required
          />
          <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-error
            *ngIf="
              registerForm.get('password').hasError('minlength') &&
              registerForm.get('password').hasError('required')
            "
            >Password must have at least 8 characters</mat-error
          >
        </mat-form-field>
</pre>

ts文件

    export class RegisteruserComponent implements OnInit {
      hide = true;
      isLoad = false;
      registerForm = this.formbuilder.group(
        {
          name: [null],email: [
            null,Validators.compose([
              Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'),]),],password: [
            null,Validators.compose([
              Validators.required,Validators.minLength(5),Validators.maxLength(5),confirmPassword: ['',Validators.required],},{ validators: passwordMatchValidator }
      );
      constructor(private formbuilder: FormBuilder) {}
      ngOnInit(): void {}
      // tslint:disable-next-line: typedef
      /* Called on each input in either password field */
      // tslint:disable-next-line: typedef
      confirmPassword() {
        return this.registerForm.hasError('passwordMismatch')
          ? this.registerForm.controls.confirmPassword.setErrors([
              { passwordMismatch: true },])
      : this.registerForm.controls.confirmPassword.setErrors(null);
  }
  // tslint:disable-next-line: typedef
  onSubmit() {
    // tslint:disable-next-line: no-debugger
    debugger;
    console.log(this.registerForm);
  }
}

当我尝试隐藏并显示密码图标时，它的隐藏并显示正常工作，但问题是表格也显示验证边框颜色突出显示，请问有人可以帮助我吗？它的隐藏与显示功能正常，但是问题在于表格的总和也显示了验证边框的颜色突出显示，请问有人可以帮忙吗

解决方法

尝试添加按钮类型=按钮

<button     type="button"
            mat-icon-button
            matSuffix
            (click)="hide = !hide"
            [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="hide"
          >