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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
js树形控件脚本代码
Jul 24 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 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 无法载入mysql扩展
2010/03/12 PHP
php debug 安装技巧
2011/04/30 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
在视频前插入广告
2006/11/20 Javascript
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
详解python对象之间的交互
2020/09/29 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
就业协议书怎么填
2014/09/15 职场文书
银行授权委托书格式
2014/10/10 职场文书
学校师德师风整改方案
2014/10/28 职场文书
公司员工安全协议书
2014/11/21 职场文书
入学证明
2015/06/23 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server