Form Submit 行為

FormsModule 與表單提交

FormsModule 的主要功能是處理表單控制項的雙向綁定和驗證，它不會自動阻止表單的預設提交行為。

表單提交行為示例

1. 會觸發瀏覽器預設提交行為

即使引入了 FormsModule，但沒有處理提交事件：

<form>
  <input type="text" [(ngModel)]="name">
  <button type="submit">Submit</button>
</form>

2. 處理按鈕點擊但仍會提交

雖然處理了按鈕的 click 事件，表單還是會執行預設提交：

<form>
  <input type="text" [(ngModel)]="name">
  <button type="submit" (click)="onSubmit()">Submit</button>
</form>

3. 正確處理表單提交的方式

使用 Angular 的 ngSubmit 事件：

<form (ngSubmit)="onSubmit()">
  <input type="text" [(ngModel)]="name">
  <button type="submit">Submit</button>
</form>

處理表單提交的兩種方式

1. 使用 ngSubmit

<form (ngSubmit)="onSubmit()">
  <!-- form content -->
</form>

onSubmit() {
  // 處理提交邏輯
  // 不需要 preventDefault()
}

2. 使用一般的 submit 事件

<form (submit)="onSubmit($event)">
  <!-- form content -->
</form>

onSubmit(event: Event) {
  event.preventDefault();
  // 處理提交邏輯
}

建議做法

• 優先使用 (ngSubmit)

• 避免只依賴按鈕的 click 事件