Angular 模板式表單和響應式表單

2021-09-23 01:57:31 字數 1740 閱讀 8243

1. 模板式表單和響應式表單的不同點

(1)不管是模板式表單還是響應式表單,都有乙個對應的資料模型來儲存表單中的資料。在模板式表單中,資料模型是通過元件模板中的相關指令來定義的;而在響應式表單中,我們需要通過編寫 typescript **來建立乙個資料模型,然後使用一些特定的指令,將模板上的html元素與資料模型連線在一起。

(2)在模板式表單中不能直接訪問到資料模型中的formcontrol、formgroup、formarray這些類,在響應式表單中是可以直接訪問到這些類的。

(3)如果想使用這兩種表單,都需要引入相應的模組,模板式表單需要引入:formsmodule,響應式表單需要引入:reactiveformsmodule

2. 表單的建立示例

(1)模板式表單

模板式表單中不需要我們自己手動編寫**來建立資料模型,但是需要通過模板式表單中的相關指令來定義。意思就是說,我們在html中的元素中使用了相關指令,angular就會隱式的幫我們建立資料模型。

模板式表單的相關指令:

模板式表單使用示例:

當我們使用了相應的指令時,還要為該元素指定乙個 name 屬性。

(2)響應式表單

響應式表單的建立需要兩步:1)在 ts 檔案中建立乙個資料模型 2)使用指令將模板元素繫結到資料模型上

第一步:根據 html 中的元素建立相應的資料模型

第二步:使用指令將模板元素繫結到資料模型上

響應式表單的指令:

formgroupformarray都是可以將多個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...