Template-driven Forms 基礎

ngModel 指令的用途

在 template-driven 表單中，我們使用 ngModel 指令來讓 Angular 知道並註冊表單輸入元素：

<input id="email" type="email" ngModel />

這裡的 ngModel 不是用於雙向繫結（沒有使用 [(ngModel)] 語法），而是作為一個指令，告訴 Angular 這是一個需要被表單追蹤的輸入元素。

輸入元素的類型

這個被註冊的輸入元素不一定要是 <input>，也可以是：

<textarea>
<select>
其他表單控制元素

重要規則

使用 ngModel 時有兩個重要規則：

ngModel 必須在 <form> 元素內使用
使用 ngModel 的元素必須有 name 屬性

Angular 內部會使用這個 name 值來註冊輸入元素並管理它。這個 name 也會成為表單資料物件中的屬性名稱。

在表單上使用模板變數

我們可以在表單上使用特殊的模板變數語法：

<form #form="ngForm">

這種寫法不是存儲 HTMLFormElement，而是將模板變數綁定到由指令或元件公開的其他值。ngForm 是一個特殊標識符，它將 form 模板變數綁定到一個 NgForm 類型的物件。

有了這個 ngForm 綁定，表單中所有使用 ngModel 的輸入元素都會被註冊到這個由 Angular 在後台管理的表單物件中。

完整範例

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <h2>Login</h2>
  <div class="control-row">
    <div class="control no-margin">
      <label for="email">Email</label>
      <input id="email" type="email" name="email" ngModel />
    </div>
    <div class="control no-margin">
      <label for="password">Password</label>
      <input id="password" type="password" name="password" ngModel />
    </div>
    <button class="button">Login</button>
  </div>
</form>

onSubmit(form: NgForm) {  // 接收參數類型為 NgForm
  console.log(form);
}

表單物件的重要屬性

當我們取得 NgForm 物件後，可以存取許多有用的屬性：

form.value - 包含所有表單控制項的當前值
form.valid - 表單是否有效（所有驗證都通過）
form.invalid - 表單是否無效（至少一個驗證未通過）
form.touched - 表單是否被觸摸過（使用者與至少一個控制項互動）
form.untouched - 表單是否未被觸摸
form.dirty - 表單是否變髒（至少一個值被更改）
form.pristine - 表單是否保持原始狀態（沒有值被更改）

存取個別控制項

我們可以透過 form.controls 存取個別控制項：

form.controls['email'].value     // 獲取特定控制項的值
form.controls['email'].valid     // 檢查特定控制項是否有效
form.controls['email'].touched   // 檢查特定控制項是否被觸摸過

或使用較短的語法：

form.value.email     // 直接獲取控制項的值

PreviousManaging Forms NextTemplate-driven Form 表單驗證

Last updated 5 months ago