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

Question

<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 file

    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);
  }
}

When i try to hide & show the password icon it's hide & show working properly but the issue is total form also showing validation border color is highlighting, can any one help me on this When i try to hide & show the password icon it's hide & show working properly but the issue is total form also showing validation border color is highlighting, can any one help me on this

Answer 1

Try to add button type = button

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