即使我在處理程序中返回 false，Angular 仍然提交表單

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仍然被調用，但現在表單無法提交不管我是否返回假。

Answer 1

只需要在觸發事件上進行preventDefault 。 您的組件 class 應如下所示：

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

要使用它，需要從組件模板中傳入$event參數：

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

不需要(click)="confirmForm.submit() 。表單中的按鈕將默認為submit類型（否則顯式設置type="button" ），這將觸發(ngSubmit)事件。