Я пытаюсь выяснить, почему форма отправляется при переключении значка видимости для ввода пароля.
С 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>
Вот что шаблон отображает при загрузке страницы:
![enter image description here](https://i.stack.imgur.com/2hyWl.png)
Затем я нажимаю значок на поле ввода, и он работает и переключает тип ввода с «пароль» на «текст». ![enter image description here](https://i.stack.imgur.com/e1mBT.png)
Но затем, если я нажимаю на значок второй раз, переключая тип ввода обратно на «пароль», он, похоже, вызывает метод onSubmit (): ![enter image description here](https://i.stack.imgur.com/mGRv4.png)