Angular по-прежнему отправляет форму, даже когда я возвращаю false в обработчике

Question

У меня есть что-то вроде следующего:

HTML шаблон:

<form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()">
  <button type="submit" (click)="confirmForm.submit()">Submit</button>
</form>

<iframe name="my_iframe"></iframe>

И в компоненте:

submitConfirmation() {
    return false;
}

Я также пытался бросить ошибка:

submitConfirmation() {
    throw Error('test');
    return false;
}

Независимо от того, что я делаю, форма все еще отправляется! Каждый ресурс, который я нашел в Интернете, говорит мне, что если я верну false в обработчике отправки, форма не будет отправлена. Может ли это быть как-то связано с iframe? (это требуется по причинам, в которые я не буду вдаваться). Метод определенно работает, я проверил и трижды проверил.

В связанной заметке мне действительно нужно (click)="confirmForm.submit() на кнопке отправки?

РЕДАКТИРОВАТЬ: Я только что попытался удалить (click)="confirmForm.submit() и теперь я еще больше запутался! Когда я удалил эту привязку, кнопка все еще работала, метод submitConfirmation по-прежнему вызывался, но теперь форма не может быть отправлена ​​независимо от того, возвращаю ли я false или нет.

Answer 1

Просто нужно preventDefault по событию запуска. Ваш класс компонента должен выглядеть следующим образом:

submitConfirmation(event) {
  event.preventDefault();
  // other stuff
}

Для использования, которое потребует передачи параметра $event из шаблона компонента:

<form ... (ngSubmit)="submitConfirmation($event)">
  <button type="submit">Submit</button>
</form>

Нет необходимости в (click)="confirmForm.submit(). Кнопки в форме по умолчанию будут иметь тип submit (явно установлен type="button" в противном случае), и это вызовет событие (ngSubmit).