Как добавить кнопки без отправки формы в 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

Просто добавьте type='button' к нему. Кнопка без какого-либо определенного type в форме действует как кнопка submit для формы.

Answer 2

Есть три типа кнопок:

• submit: отправляет данные текущей формы. (This is default.)
• сброс: rsets данных в текущей форме.
• : просто кнопка. Его последствия должен контролироваться чем-то другим (то есть с помощью JavaScript).

, поэтому вам нужно только обновить тип атрибута до кнопки

шаблон

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

ресурсы

Answer 3

Вы можете использовать type="button", если вы не упомянули какой-либо тип, то по умолчанию кнопка считается типом отправки. Таким образом, ваш код должен выглядеть примерно так для кнопки без отправки.

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

Answer 4

Вы можете добавить $event.preventDefault() к событию нажатия кнопки

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

Answer 5

Удалите (ngSubmit)="submit()" в теге формы и поместите его в кнопку следующим образом:

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