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 相关文章推荐
js DOM 元素ID就是全局变量
Sep 20 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
php使用数组填充下拉列表框的方法
2015/03/31 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
如何在sublime编辑器中安装python
2020/05/20 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
linux面试题参考答案(5)
2016/11/05 面试题
学习雷锋活动总结
2014/04/29 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
PHP策略模式写法
2021/04/01 PHP