---
# System prepended metadata

title: 多奇 2020 年 2 月新人職前培訓班 - 3
tags: [Training, Course]

---

# 多奇 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

![](https://i.imgur.com/9Ywg2et.png)

---

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

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

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

![](https://i.imgur.com/LYadu3Q.png)


---

#### NgForm

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

---

#### ngModelGroup

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

---