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

只需添加type='button'。表单中没有任何定义的type的按钮就像表单的submit按钮一样。

Answer 2

按钮共有三种类型：

submit：提交当前表单数据。 (This is default.)
reset：以当前形式重新设置数据。
button：只是一个按钮。其影响必须由其他东西（即JavaScript）控制。

因此您只需要更新按钮

的类型属性

模板

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

resources

Answer 3

您可以将$event.preventDefault()添加到按钮点击事件中

<button mat-raised-button (click)="onCancel($event); $event.preventDefault()">

Answer 4

您可以使用type="button"，如果您未提及任何类型，则默认情况下该按钮被视为提交类型。因此，对于非提交按钮，您的代码应该看起来像这样。

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

Answer 5

在表单标签中删除(ngSubmit)="submit()"并将其放在按钮中，如下所示：

<button
    (click)="submit()"
    mat-raised-button
    color="primary">
    update
</button>

Answer 6

总的来说，我不喜欢默认按钮类型是提交的想法，我创建了以下指令来使事情正确，没有类型设置的按钮显式默认为按钮：

@Directive(
{
   selector: 'button:not([type])'
})
export class ButtonTypeDirective implements OnInit
{
   constructor(private el: ElementRef<HTMLButtonElement>, private renderer: Renderer2) 
   {
   }

   public ngOnInit()
   {
       this.renderer.setAttribute(this.el.nativeElement, 'type', 'button');
   }
}

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

6 个答案: