Angular模板表单校验方法详解


Posted in Javascript onAugust 11, 2017

本文实例为大家分享了Angular模板表单校验的方法,供大家参考,具体内容如下

1. 创建指令

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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python的Django框架中的Context使用
2015/07/15 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
详解Python中import机制
2020/09/11 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python使用Pygame绘制时钟
2020/11/29 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
化学实验员岗位职责
2013/12/28 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
促销活动总结模板
2014/07/01 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
营销计划书范文
2015/01/17 职场文书
董事长岗位职责
2015/02/13 职场文书
公司财务部岗位职责
2015/04/14 职场文书