Angular模板表單校驗(yàn)方法詳解
本文實(shí)例為大家分享了Angular模板表單校驗(yàn)的方法,供大家參考,具體內(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')"> 用戶名是必填項(xiàng) </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; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular異步執(zhí)行學(xué)習(xí)之zone.js使用
這篇文章主要為大家介紹了Angular異步執(zhí)行學(xué)習(xí)之zone.js使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08angular2 ng build部署后base文件路徑問題詳細(xì)解答
本篇文章主要介紹了angular2 ng build部署后base文件路徑問題詳細(xì)解答,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法,有興趣的小伙伴可以參考下2016-09-09Angular 通過注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例
這篇文章主要介紹了Angular 通過注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例代碼,需要的朋友可以參考下2017-05-05解決Angular.Js與Django標(biāo)簽沖突的方案
AngularJS和django的模板都是用{{}}來(lái)引用變量的,這就導(dǎo)致了沖突,所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標(biāo)簽沖突的方案,有需要的朋友們可以參考借鑒,下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12