# 多奇 2020 年 2 月新人職前培訓班 - 3
###### tags: `Training` `Course`
### 表單

* Template-Driven Form, 以範本為主
* 匯入 FormsModule
* Declarative Programming, 宣告的方式建立表單
* 使用 ngModel 指令 (Directive)
* 在範本中宣告驗證規則

* Model-Driven Form, 以模型為主
* 匯入 ReactiveFormsModule
* Imperative Programming, 用編程的方式建立表單
* 使用 formControlName 屬性
* 在元件中宣告驗證規則

* FormsModule
* NgModel
* NgModelGroup
* NgForm

* ReactiveFormsModule
* Directives
* FormControlDirective
* FormGroupDirective
* FormControlName
* FormGroupName
* FormArrayName
* Providers
* FormBuilder

---

### Template-Driven Form


---

#### [ngModel](https://angular.io/api/forms/NgModel)

> Creates a FormControl instance from a domain model and binds it to a form control element.

###### 追蹤值、互動狀態、驗證狀態、維持與元件資料同步


---

#### NgForm

* 建立一個 最上層 的 表單群組 (`FormGroup`) 實體
* 預設會將所有的 `<form>` 標籤宣告為 `NgForm` 指令
* 從範本取得 `ngForm` 物件實體，可以透過範本參考變數完成
* 建議利用 ngForm 的 ngSubmit 掌握提交事件

---

#### ngModelGroup

* 使用在有 `<form>` 標籤的表單範圍內宣告
* 用來建立一個 表單群組 (`FormGroup`) 實體
* 追蹤、取得群組內所有表單控制項的欄位值與驗證狀態

---