简单的angular2表单验证

因为项目要用到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

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

转载于:https://www.cnblogs.com/VingB2by/p/8575000.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值