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构造器的实现代码小结
May 16 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
比较node.js和Deno
Apr 27 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
计数器详细设计
2006/10/09 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
JS 建立对象的方法
2007/04/21 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JS实现星星海特效
2019/12/24 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
安全生产责任书
2014/03/12 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
裁员通知
2015/04/25 职场文书
让子弹飞观后感
2015/06/11 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
防止web项目中的SQL注入
2021/12/06 MySQL