Angular 4.x 中有兩種表單：

• Template-Driven Forms - 模板驅動式表單 (類似於 AngularJS 1.x 中的表單 )

• Reactive Forms - 響應式表單

本文主要介紹 Template-Driven Forms (模板驅動式表單) ，將涉及 ngForm、ngModel、ngModelGroup、表單提交事件、表單驗證和異常信息輸出等內容。

User interface

// signup.interface.ts
export interface User {
  name: string;
  account: {
    email: 
 
string;
    confirm: string;
  }
}

使用 template-driven 表單前，我們必須在 @NgModule 中導入 @angular/forms 庫中的 FormModule：

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

@NgModule({
  imports: [
    ...,
    FormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}

Template-driven approach

import { Component } from ‘@angular/core‘;
import { User } from ‘./signup.interface‘;

@Component({
  selector: ‘signup-form‘,
  template: `
    <form novalidate>...</form>
  `
})
export class SignupFormComponent {
  public user: User = {
    name: ‘‘,
    account: {
      email: ‘‘,
      confirm: 
 
‘‘
    }
  };
  constructor() {}
}

初始化 SignupFormComponent 組件類中的用戶模型後，我們開始實現第一個功能點：即綁定 name、email、confirm 輸入框的值

Binding ngForm and ngModel

我們從 ngForm 開始，更新後的模板如下：

<form novalidate #f="ngForm">
  <label>
    <span>Full name</span>
    <input type="text" placeholder="Your full name">
  </label>
</form>

上面代碼中，我們把 ngForm 的值賦值給 #f 變量，通過該變量我們可以方便的獲取表單的值。

友情提示：#f 變量的值，是 ngForm 指令的導出對象。

在模板中，我們可以通過以下方式查看表單的值：

{{ f.value | json }} // {}

上面示例 f.value 輸出 {}，因為此時我們表單中還未綁定任何值。在 Angular 1.x 中我們可以使用 ng-model 指令進行表單數據的雙向綁定，接下來我們來看一下 Angular 4.x 中怎麽實現數據綁定。

ngModel,[ngModel] and [(ngModel)]

在 Angular 4.x 中 ngModel 有三種不同的語法：

• ngModel - 直接使用 ngModel 指令，沒有使用綁定或關聯任何值。此時，ngModel 將自動關聯表單控件的 name 屬性，並使用該值作為 ngForm 對象的屬性名。

<form novalidate #f="ngForm">
  ...
    <input
     type="text"
     placeholder="Your full name"
     name="name"
     ngModel>
  ...
</form>

友情提示：上面示例中，如果 input 輸入框若未設置 name 屬性，應用將會拋出異常。ngModel 指令基於輸入框的 name 屬性，進行綁定。

運行以上代碼，f.value 的輸入值如下：

{{ f.value | json }} // { name: ‘‘ }

非常好，我們已經綁定了 name 輸入框的值。但我們應該怎麽為輸入框設置初始值？

[ngModel] = one-way binding syntax (單向綁定語法)

為了設置輸入框初始值，我們先要更新一下 SignupFormComponent 組件類的用戶模型：

...
user: User = {
  name: ‘Semlinker‘,
  account: {
    email: ‘‘,
    confirm: ‘‘
  }
};
...

更新完用戶模型，我們需要同步更新組件模板，具體如下：

<form #f="ngForm">
  ...
    <input
      type="text"
      placeholder="Your full name"
      name="name"
      [ngModel]="user.name">
  ...
</form>

代碼重新運行後，f.value 的輸出如下：

{{ f.value | json }} // { name: ‘Semlinker‘ }

從上面示例可以看出，使用 [ngModel] 允許我們通過 this.user.name 設置 name 輸入框的初始值，而且該值會自動綁定到 f.value 對象上。

友情提示：[ngModel] 是單向綁定，當表單中 name 輸入框的值改變時，不會同步更新 this.user.name

如果想在 name 輸入框值變化時，自動同步更新 this.user.name 的值，我們需要使用雙向綁定。

• [(ngModel)] = two-way binding syntax (雙向綁定)，具體示例如下：

<form #f="ngForm">
  ...
    <input
      type="text"
      placeholder="Your full name"
      name="name"
      [(ngModel)]="user.name">
  ...
</form>

上面示例成功運行後，我們可以在模板中新增以下代碼，然後觀察 user 模型的值：

{{ user | json }} // { name: ‘Semlinker‘ }

需要註意的是，以下兩種方式是等價的：

<input [(ngModel)]="user.name">
<input [ngModel]="user.name" (ngModelChange)="user.name = $event">

其中 [(ngModel)] 是簡寫的語法糖。

ngModels and ngModelGroup

Template-Driven Forms