Angular模板表單校驗方法詳解
更新時間：2017年08月11日 15:56:13 作者：work hard work smart
這篇文章主要為大家詳細介紹了Angular模板表單校驗方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Angular模板表單校驗的方法，供大家參考，具體內(nèi)容如下
1. 創(chuàng)建指令
ng g directive directives/mobileValidator
2. html
<form #myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)">
<div>
<h3>登錄</h3>
</div>
<div>用戶名：<input ngModel required name="username" type="text" (input)="onMobileInput(myForm)"></div>
<div [hidden]="mobileValid || moblieUntouched">
<div [hidden]="!myForm.form.hasError('required','username')">
用戶名是必填項
</div>
</div>
<div>電話： <input ngModel mobile name="mobile" type="text"></div>
<button type="submit">登錄</button>
</form>
3. 控制器
mobileValid: boolean = true;
moblieUntouched: boolean = true;
onMobileInput(form: NgForm) {
if (form) {
this.mobileValid = form.form.get('mobile').valid;
this.moblieUntouched = form.form.get('mobile').untouched;
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器（六）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
這篇文章主要介紹了angular的輸入和輸出的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了AngularJs ui-router 路由的簡單介紹。簡單明了的說明了ngRoute和ui-router的區(qū)別和用法，有興趣的可以了解一下2017-04-04
AngularJS實現(xiàn)根據(jù)不同條件顯示不同控件
本篇文章主要介紹了AngularJS實現(xiàn)根據(jù)不同條件顯示不同控件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
本文通過示例向大家介紹了AngularJS語法的使用，小伙伴們認真研讀下吧，非常的實用哦。2015-01-01
Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
這篇文章主要介紹了Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法,需要的朋友可以參考下2017-10-10
本篇文章主要介紹了如何將angular-ui的圖片輪播組件封裝成一個指令 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章總結(jié)了一些Angular的應(yīng)用技巧,都是在實際項目中應(yīng)用了的,感覺對于使用Angular還是有一些幫助的，有需要的小伙伴可以參考下2016-09-09
AngularJS $http模塊POST請求實現(xiàn)
本篇文章主要介紹了AngularJS $http模塊POST請求實現(xiàn)，這里整理了詳細的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
angula中使用iframe點擊后不執(zhí)行變更檢測的問題
這篇文章主要介紹了angula中使用iframe點擊后不執(zhí)行變更檢測問題，本文給大家分享解決方案，通過實例代碼給的大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05