Angular-表單(Form)-ReativeForm簡介

前言

在Web的設計當中，基本上都一定會用到表單，今天就來簡單的講解表單的一些種類與管理方式。先來貼上目前Angular的筆記以及今天講的範圍。

Angular筆記

Angular當中有兩種表單管理方式

1.Template-driven forms
2.Reactive forms

兩者比較常見的差異會在於驗證的部分，Template-driven forms是屬於非同步更新值，Reactive forms則是同步，Template-driven forms我們會需要透過directive去更新值來觸發驗證而Reactive forms則可以馬上觸發。

Reactive forms

在講解Reactive forms之前先來介紹四個重點成員

1. AbstractControl: 最基本的抽象類別，為了提供後面三個元素的基底類別
2. FormGroup: 一個元素的群組，可以把它想像成一個Class的概念
3. FormArray: 元素的集合，這裡的元素不限Group或Control
4. FormControl: 表單元素的最小單位，可想像成Input、Select元素

根據上面的解釋，我相信 一定聽不懂，接下來用一個實際的JSON資料來應 該會比較好理解

在上面的這個資料格式，就可以設計能如下圖

Class結構圖

紅色:FormGroup
綠色:FormControl
藍色:FormArray

實作並加上驗證

在AppModule.ts注入ReactiveFormsModule

建立一個Form的結構(有人喜歡用FormBuilder，我自己不喜歡而已)

form: FormGroup = new FormGroup({
calssname: new FormControl(null,Validators.required),//這裡代表必填
teacher: new FormControl(),
students: new FormArray([])
});

Html

SampleCode

參考資料

Angular.io