码迷,mamicode.com
首页 > 其他好文 > 详细

简单的angular2表单验证

时间:2018-03-15 19:16:31      阅读:541      评论:0      收藏:0      [点我收藏+]

标签:总结   src   nbsp   name   详细   设置   文档   angular   UI   

因为项目要用到angular2,在完成功能的基础上在html页面尝试使用响应式表单

 

angular的官方网站虽然有很详细的东西,但是要运用到自己项目上还是要好好理解一番的

原本代码:

<input type="data" class="form-control" [(ngModel)]="title" placeholder="输入活动标题" required>

目标是希望在用户选中并输入后假若删除到空则在下方出现Title is required

研究官方文档后最后修改为:

<label for="title">标题:</label>
<input type="data" class="form-control" id="title" [(ngModel)]="title" #title1="ngModel" name="title" placeholder="输入活动标题" required>
<div [hidden]="title1.valid || title1.pristine"
class="alert alert-danger">
Title is required
</div>

进行测试,成功!

技术分享图片

 

总结:

input标签中的id属性主要负责与label标签的for属性绑定、name属性负责对提交到服务器后的表单数据进行标识,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 

.valid标记表单元素有效,使得此值是有效时隐藏,避免网页一打开就出现提示;.pristine表示表单元素是纯净的,用户未操作过(未操作为ture,操作后为false),使得此值未被编辑时隐藏。

#title1="ngModel"是把title控件的属性与hidden绑定起来,因为名字不能与ngModel绑定的数据相同,改为title1

这只是最简单的表单验证,以后还有很多要学的东西,记起来才能更好地理解基础。

简单的angular2表单验证

标签:总结   src   nbsp   name   详细   设置   文档   angular   UI   

原文地址:https://www.cnblogs.com/VingB2by/p/8575000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!