隨記

Week 05 · Day 02 — Template-driven 表單：取值與驗證

學習目標

存參考並取值

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  ...
</form>

loginForm 是一個 NgForm，可取得：

onSubmit(form: NgForm): void {
  console.log(form.value);   // { email: "...", password: "..." }
  console.log(form.valid);   // boolean
}

- form.value → 所有有 ngModel+name 欄位的值（物件）

另一種驗證存取 用 #email="ngModel" 抓單一控制：

<input type="email" name="email" ngModel required email #email="ngModel">
<div *ngIf="email.invalid && email.touched">
  Email 欄位有錯誤
</div>

- email.invalid：該欄位驗證失敗 - email.touched：使用者有碰過（避免一開始就紅字）

送出流程 1. (ngSubmit) 觸發 onSubmit 2. 若 form.invalid 可用 return 提早結束 3. 合法才處理資料

onSubmit(form: NgForm): void {
  if (form.invalid) return;
  console.log('Login with', form.value);
  form.reset();
}