Angular: метод отправки выполняется нажатием другой кнопки

Question

Я использую Angular с Angular Материальными компонентами. Итак, я добавил компонент входа (форму), где пользователь может ввести свой адрес электронной почты и пароль. Поле ввода для пароля имеет глазок на конце, чтобы позволить пользователю отображать пароль в виде простого текста, если это необходимо. К сожалению, если дважды щелкнуть кнопку «глаз», выполняется метод отправки, связанный с кнопкой отправки.

Простой вопрос: почему?

Шаблон

<form [formGroup]='loginForm' (ngSubmit)="onSubmit()">
<div>
    <mat-form-field>
        <mat-label for="email">E-Mail</mat-label>
        <input matInput type="text" formControlField="email" />
        <mat-error>
            Test
        </mat-error>
    </mat-form-field>
</div>

<div>
    <mat-form-field>
        <mat-label for="password">Password</mat-label>
        <input matInput [type]="hide ? 'password' : 'text'" formControlField="password" />
        <button mat-icon-button matSuffix class="mat-icon-button mat-button-base" (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
        </button>
    </mat-form-field>
</div>

<button mat-raised-button color="primary" type="submit">Login</button>

Компонент

export class LoginComponent implements OnInit {

loginForm: FormGroup;
hide = true;

constructor(
 private formBuilder: FormBuilder
) { 
   this.loginForm = this.formBuilder.group({
   email: ['', [Validators.required, Validators.email]],
   password: ['', [Validators.required]]
 })
}

onSubmit() {
 window.alert("Login button clicked");
}

Answer 1

Попробуйте добавить

type="button"

к вашей кнопке «глаз»

Это скажет браузеру не рассматривать его как кнопку отправки, когда внутри формы.