我试图弄清楚为什么在切换密码输入的可见性图标时提交表单。
来自 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() 方法：
