1.簡(jiǎn)單的H5表單
當(dāng)我們點(diǎn)擊注冊(cè)按鈕的時(shí)候會(huì)對(duì)表單進(jìn)行校驗(yàn)
2.Angular表單的分類
兩種表單的不同點(diǎn)
3.模板式表單 只能使用指令來(lái)定義模型
下面的三個(gè)指令都包含在 FormModule 中
ngForm 指令自動(dòng)添加到form標(biāo)簽中
ngForm 不僅僅局限于 form標(biāo)簽 ngForm也可以 定義于div元素之下 效果是一樣的
如下圖
如果你不希望由ngForm來(lái)處理你的標(biāo)簽可以在上面添加一個(gè)指令 如下圖
angular 就不會(huì)接管這個(gè)表單了
于此同時(shí) 我們可以給這個(gè)表單添加一個(gè) 引用變量 這個(gè)引用變量方便我們?cè)诤竺嬉么薴orm來(lái)使用
看下面的例子
并沒(méi)有出現(xiàn)json樣式的字符串
我們想要解決這個(gè)問(wèn)題 我們需要給 input標(biāo)簽來(lái)綁定相應(yīng)的ngmodel 下圖給 表單添加了 ngmodel 注意 ***************一定要給表單一個(gè)name的屬性 必須要給的
如下圖
于此同時(shí) 我們同樣可以給 ngmodel一個(gè)模板變量 方便我們來(lái)引用
如果我們想要完成 提交功能 就需要我們來(lái)給 form 標(biāo)簽的ngSubmit
接下來(lái)的一個(gè)指令標(biāo)簽
ngModelGroup
接下來(lái) 看代碼 下面是一個(gè)組件的模板案例
下面的是 一個(gè)模板的案例
結(jié)果 如下圖
******************************模板表單總結(jié)
- 響應(yīng)式表單
響應(yīng)式表單涉及的三個(gè)類
1) FormControl 構(gòu)成表單的基本單位 不僅僅控制 表單的屬性以及數(shù)值 并且還可以表示
angular里面的 日歷 下拉選擇框 里面包含關(guān)聯(lián)的html元素 當(dāng)前的值 校驗(yàn)狀態(tài) 以及是否修改過(guò)的等等信息
2）FormGroup 封裝多個(gè)FormControl 值和狀態(tài) 可以代表多個(gè)表單 在表單校驗(yàn)中如果一個(gè) formControl 不合理時(shí) 整個(gè)的formGroup就不合理 （無(wú)效 ）
聲明如下圖
3）FormArray
FormArray與 FormGroup的區(qū)別就是 沒(méi)有先關(guān)的key 只能通過(guò)序號(hào)來(lái)訪問(wèn)里面的formControl
響應(yīng)式表單的指令
上面的指令完全來(lái)自下面的module
****************響應(yīng)式表單需要注意的地方 ：：
1.響應(yīng)式表單好多的指令都是以form開(kāi)頭的
2.響應(yīng)式表單不可以聲明引用性變量
3.一個(gè)可以在模板中操作（模板式表單） 另一個(gè)是僅僅能在代碼中操作（響應(yīng)式表單）
響應(yīng)式表單的使用方法
組件如下
模板如下
單獨(dú)添加了一個(gè)formControl之后的效果
用響應(yīng)式表單的方法來(lái)重構(gòu)
組件中
模板中
效果如下
接下來(lái) 我們使用 formbuilder 來(lái)構(gòu)建 formGroup和 formcontrol formbuilder 還可以為我們快速的構(gòu)建校驗(yàn)器
下面這段代碼就能夠完全代替上面的代碼
校驗(yàn)器
自定義的校驗(yàn)器如下
此外 angular提供了一組預(yù)定義的校驗(yàn)器
Validators這個(gè)類里面的 required minlength maxlength 和 parten
下面看如何使用這些預(yù)定好的校驗(yàn)器
如下我們自定義了一個(gè)手機(jī)號(hào)校驗(yàn)的方法
上面的手機(jī)校驗(yàn)是單個(gè)form的校驗(yàn) 有的時(shí)候我們需要校驗(yàn)多個(gè)字段angular 提供給我們
同時(shí)校驗(yàn)多個(gè)表單的的校驗(yàn)方法
下面的方法就是校驗(yàn)兩個(gè)表單的例子 驗(yàn)證密碼和確認(rèn)密碼兩次的輸入數(shù)據(jù)是否相同
并添加到下面的聲明中
上面的表單的校驗(yàn)器不一定需要我們一定要寫(xiě)在組件的校驗(yàn)器中 有的時(shí)候 需要我們將校驗(yàn)器放在一個(gè)特定的類中 糊治，并使用 export 將其暴露出來(lái) 使其可以在多個(gè)表單中進(jìn)行校驗(yàn)
例子如下 下面是我們將驗(yàn)證的方法寫(xiě)在外部的函數(shù)中
我們?cè)诮M件中進(jìn)行相應(yīng)的引用
以后我們可以在組件中復(fù)用這些功能相同的校驗(yàn)器了
通過(guò)下面的驗(yàn)證 只有當(dāng)判斷語(yǔ)句全部滿足的時(shí)候 才向后臺(tái)發(fā)出請(qǐng)求或者提交數(shù)據(jù)等等
上面完成了 校驗(yàn)器的邏輯與功能
我們通常在校驗(yàn)完 數(shù)據(jù)的正確性之后 都會(huì) 返回錯(cuò)誤的提示信息給用戶 制轰。
下面的例子就是通過(guò) div的 hidden屬性 用來(lái)顯示錯(cuò)誤的提示信息是否展現(xiàn)給用戶
如果我們要驗(yàn)證的信息是嵌套在一個(gè)formGroup中的時(shí)候 我們需要使用下面的方式來(lái)驗(yàn)證
上面的錯(cuò)誤信息也可以在校驗(yàn)器中進(jìn)行聲明 沒(méi)有必要寫(xiě)在模板上面 請(qǐng)看下面的實(shí)現(xiàn)方法
下面我們來(lái)講一下異步校驗(yàn)器
異步校驗(yàn)器的返回值不是任意對(duì)象的 返回的是一個(gè)可以觀測(cè)的流
狀態(tài)字段
第一組字段判斷的是 否獲取過(guò)焦點(diǎn) 如果獲取過(guò)焦點(diǎn) touched =true untouched =false
反之 沒(méi)有獲取過(guò)焦點(diǎn) touched=false untouched=true
看一下下面的例子 只有當(dāng)username是驗(yàn)證有效的或者沒(méi)有獲取焦點(diǎn)的時(shí)候 將錯(cuò)誤的提示信息展現(xiàn)出來(lái)
第二組字段
如果一個(gè)字段的值從未改變過(guò) pristine 為true dirty為false
反之一個(gè)字段的值 改變過(guò) pristine 為false dirty為true
第三組字段
當(dāng)我們正在處理異步校驗(yàn)的時(shí)候 我們將 pending的值 設(shè)置為true
我們也可以根據(jù) 表單的不同狀態(tài)給他添加不同的樣式
上面講述了如何校驗(yàn)響應(yīng)式的表單 現(xiàn)在我們要校驗(yàn) 模板式表單
1.首先 我們先生成一個(gè)指令
指令就是一個(gè)沒(méi)有模板的組件 指令可以作為html的屬性來(lái)使用
如下 我們可以在組件模板里面使用
我們現(xiàn)在要做的就是將我們之前定義的 校驗(yàn)器 包裝到 指令中去
我們也可以使用系統(tǒng)提供的默認(rèn)的校驗(yàn)器 required maxlength minlength patern
下面是整個(gè)的模板的校驗(yàn)代碼
假如我們想了解 一下表單的正確性 只能在模板中 我們將 表單的數(shù)據(jù)傳遞到模板中去
下面 我們需要將錯(cuò)誤的信息返還給用戶
也可以完成和 響應(yīng)式表單一樣的功能
