如何在不提交Angular表单的情况下添加按钮？

Question

在Angular中，如何添加按钮而不提交表单？

例如，我想在onCancel不提交表单的情况下打电话，但是更新按钮应提交表单，并且仍然保留ngSubmit。

<form [formGroup]="form" (ngSubmit)="submit()">
    <p>
    <select ...>...</select>
    </p>
    <p>
    <button
        type="submit"
        mat-raised-button
        color="primary">
        update
    </button>
    <button mat-raised-button (click)="onCancel($event)">
        cancel
    </button>
    </p>
</form>

Answer 1

共有三种类型的按钮：

• submit ：提交当前表单数据。 (This is default.)
• reset : 以当前形式设置数据。
• 按钮：只是一个按钮。它的效果必须由其他东西控制（即使用 JavaScript）。

所以你只需要更新按钮的类型属性

模板

<button type="button" mat-raised-button (click)="onCancel($event)">
    cancel
</button>

资源

Answer 2

只需添加type='button'即可。没有type在表单中定义的submit按钮的行为类似于该表单的按钮。