Reactive Forms 表單提交

表單提交基本設定

在 Reactive Forms 中，表單提交的設定方式和 Template-driven Forms 類似，但有一些重要區別：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <!-- 表單控制項 -->
  <button type="submit">Login</button>
</form>

與 Template-driven Forms 最大的不同點是：不需要傳遞表單參數。

這是因為在 Reactive Forms 中，表單模型完全定義在 TypeScript 中，元件類別可以直接存取表單值，無需從範本傳入。

在元件中處理提交

在元件類別中，可以直接存取表單值：

onSubmit() {
  const enteredEmail = this.loginForm.value.email;
  const enteredPassword = this.loginForm.value.password;
  console.log(enteredEmail, enteredPassword);
  
  // 可以在這裡進行表單重置
  this.loginForm.reset();
}

直接存取整個表單值

也可以直接使用 loginForm.value 來取得整個表單的值物件：

onSubmit() {
  console.log(this.loginForm.value);
  // 輸出: { email: '使用者輸入的值', password: '使用者輸入的值' }
}

提交前檢查表單有效性

在提交前，通常會檢查表單是否有效：

onSubmit() {
  // 檢查表單是否有效
  if (this.loginForm.invalid) {
    return;  // 如果無效，不處理提交
  }
  
  // 處理有效表單
  console.log(this.loginForm.value);
}

這樣設計的好處是，可以完全在 TypeScript 中控制表單邏輯，提供更強大的型別檢查和更好的測試能力。