角度:通过单击另一个按钮执行的提交方法

Question

我正在使用带有角度材质组件的 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"添加到"眼睛"按钮。

这将告诉浏览器在表单内不要将其视为提交按钮。

原因是button缺少type参数被视为默认状态，默认情况下button元素具有submit。

缺失值默认值

和无效值默认值为"提交按钮"状态。

来源： https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type