隨記

Week 05 · Day 04 — Reactive 表單：模板連結與送出

學習目標

  • 在模板連結 Reactive 表單
  • 顯示單欄驗證錯誤
  • 實作送出並判別表單是否合法

重點

模板連結 

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name:</label>
    <input formControlName="name">
    <div *ngIf="registerForm.get('name')?.invalid && registerForm.get('name')?.touched">
      Name is required (min 2 characters)
    </div>
  </div>

  <div>
    <label>Email:</label>
    <input formControlName="email">
    <div *ngIf="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
      Valid email is required
    </div>
  </div>

  <button type="submit" [disabled]="registerForm.invalid">
    Register
  </button>
</form>

關鍵點 - [formGroup]="registerForm"：把表單綁到 FormGroup - formControlName="name"：每個輸入框對應 FormGroup 裡的欄位 - registerForm.get('name')：取得單一 FormControl - .invalid && .touched：欄位有錯且使用者碰過才顯示

送出 

onSubmit(): void {
  if (this.registerForm.invalid) return;
  console.log(this.registerForm.value);  // { name, email, password, confirmPassword }
}

實作

  1. 在模板連結 [formGroup] + formControlName
  2. 加上 name / email 的錯誤提示
  3. 送出鈕 [disabled]="registerForm.invalid"
  4. 實作 onSubmit 印出表單值與 .value

作業

  • 完成模板與 FormGroup 的連結
  • 用 *ngIf="form.get('x')?.invalid" 顯示單欄錯誤
  • 實作送出並印出 registerForm.value