隨記

Week 05 · Day 01 — Template-driven 表單：基礎

學習目標

  • 認識兩大表單方式：Template-driven 與 Reactive
  • 建立 Template-driven 登入表單
  • 用 ngModel 綁定與 #form="ngForm" 取得表單控制

重點

兩種表單方式 | 方式 | 作法 | 適用 | |------|------|------| | Template-driven | 主要在模板（HTML）用指令 | 簡單表單 | | Reactive | 主要在類別（TS）建立 FormGroup | 複雜、需大量驗證 |

前置：import FormsModule 

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})

Template-driven 登入表單 

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <div>
    <label>Email:</label>
    <input type="email"
           name="email"
           ngModel
           required
           email>
  </div>
  <div>
    <label>Password:</label>
    <input type="password"
           name="password"
           ngModel
           required
           minlength="6">
  </div>
  <button type="submit" [disabled]="loginForm.invalid">
    Login
  </button>
</form>

關鍵點 - name="xxx" + ngModel：讓輸入框成為表單的一部分 - required / email / minlength：內建驗證（HTML 屬性式） - #loginForm="ngForm"：把整個表單交給變數 loginForm - loginForm.invalid：表單有任一欄位不合法時為 true - (ngSubmit)：送出表單時觸發

實作

  1. import FormsModule
  2. 建立登入表單（如上）
  3. 加上 onSubmit 方法列印表單值
  4. 觀察：表單不完整時送出鈕是 disabled

作業

  • import FormsModule
  • 建立含 email + password 的登入表單
  • 說明 loginForm.invalid 的用途