angular - mat-form-field matInput、matSuffix、およびリアクティブ フォームからの予期しない動作

Question

パスワード入力の表示アイコンを切り替えると、フォームが送信される理由を理解しようとしています。

login.component.ts から

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  public loginForm: FormGroup;
  public hide: boolean = true;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      email: [""],
      password: [""]
    })
  }

  onSubmit() {
    console.log("Form submit event fired...");
    console.log(this.loginForm.value);
  }

}

差出人: login.component.html

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <mat-card>
            <mat-card-header>
                <mat-card-title>
                    Login
                </mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <div fxLayout="column">
                    <mat-form-field appearance="outline">
                        <mat-label>Email</mat-label>
                        <input matInput placeholder="Placeholder" formControlName="email">
                    </mat-form-field>
                    <mat-form-field appearance="outline">
                        <mat-label>Password</mat-label>
                        <input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
                        <button mat-icon-button matSuffix (click)="hide = !hide">
                        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                        </button>
                    </mat-form-field>
                </div>
            </mat-card-content>
            <mat-card-actions>
                <button mat-button (click)="onSubmit()">Login</button>
            </mat-card-actions>

        </mat-card>
    </form>

これは、ページがロードされたときにテンプレートが表示するものです。

次に、入力ボックスのアイコンをクリックすると機能し、入力タイプが「パスワード」から「テキスト」に切り替わります。

しかし、もう一度アイコンをクリックして、入力タイプを「パスワード」に戻すと、onSubmit() メソッドがトリガーされるようです。