Неожиданное поведение от 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);
  }

}

От: логин. компонент. 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 ():

Answer 1

Ваша кнопка внутри формы будет считать type="submit" по умолчанию.

, поэтому вы должны сделать ее простой кнопкой, как ..

 <button type="button" mat-icon-button matSuffix (click)="hide = !hide">
                        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                        </button>

Здесь я добавил type='button'

надеюсь, что это поможет вам сообщить мне, если у вас есть проблема ..

Спасибо