1. 模板式表單和響應式表單的不同點
(1)不管是模板式表單還是響應式表單,都有乙個對應的資料模型來儲存表單中的資料。在模板式表單中,資料模型是通過元件模板中的相關指令來定義的;而在響應式表單中,我們需要通過編寫 typescript **來建立乙個資料模型,然後使用一些特定的指令,將模板上的html元素與資料模型連線在一起。
(2)在模板式表單中不能直接訪問到資料模型中的formcontrol、formgroup、formarray
這些類,在響應式表單中是可以直接訪問到這些類的。
(3)如果想使用這兩種表單,都需要引入相應的模組,模板式表單需要引入:formsmodule
,響應式表單需要引入:reactiveformsmodule
。
2. 表單的建立示例
(1)模板式表單
模板式表單中不需要我們自己手動編寫**來建立資料模型,但是需要通過模板式表單中的相關指令來定義。意思就是說,我們在html中的元素中使用了相關指令,angular就會隱式的幫我們建立資料模型。
模板式表單的相關指令:
模板式表單使用示例:
當我們使用了相應的指令時,還要為該元素指定乙個 name 屬性。
(2)響應式表單
響應式表單的建立需要兩步:1)在 ts 檔案中建立乙個資料模型 2)使用指令將模板元素繫結到資料模型上
第一步:根據 html 中的元素建立相應的資料模型
第二步:使用指令將模板元素繫結到資料模型上
響應式表單的指令:
formgroup
和formarray
都是可以將多個formcontrol
物件包含起來,它們之間不同的是:formarray
只有乙個formarrayname
指令;formgroup
用於包含具有固定大小的html組元素,而formarrayname
用於包含大小不固定的組元素,也就是說這一組元素可以動態增加。
第三步:響應式表單在建立資料模型的時候可以用formbuilder,formbuilder是 angular 提供的乙個工具,它簡化了定義表單資料元素的語法,可以使用更少的**構建出相同的資料結構。
下圖是不使用 formbuilder 和使用 formbuilder 的對比:
angular響應式表單
在使用ng zorro的表單時,發現他和angular的表單有很大不同,於是就去學習了一下angular的表單。在angular中表單有兩種形式,一種是模板驅動表單,一種是響應式表單,模板驅動表單跟angularjs的表單差不多,都是在模板中進行資料繫結,驗證等,而響應式表單是功能更強大,靈活的表單...
Angular 響應式表單之表單分組
表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能 git倉庫 在分析 之前,首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...
Angular 響應式表單之表單分組
表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能 git倉庫 在分析 之前,首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...