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

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文件

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

当我试图隐藏&显示隐藏的密码图标&显示工作正常，但问题是总形式也显示验证边框颜色是突出显示的，当我试图隐藏&显示隐藏的密码图标&显示工作正常，但问题是整个表单也显示验证边框颜色突出显示，有人能在这个上帮我吗

Answer 1

尝试添加button type=button

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