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 Tools tooltip使用说明
Jul 14 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
react基本安装与测试示例
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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
JS实现轮播图效果
2020/01/11 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
转党组织关系介绍信
2014/01/08 职场文书
工作时间上网检讨书
2014/02/03 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
清扬洗发水广告词
2014/03/14 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
违纪检讨书
2015/01/27 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers