Angular2表单验证
来源:互联网 发布:hip2p网络摄像机 编辑:程序博客网 时间:2024/06/05 10:47
Angular2中使用表单,首先要在from上添加 #forma=”ngForm”,这个是给from定义成了Angular的from对象
<form class="form-horizontal" #forma="ngForm" (ngSubmit)="onSubmit(showModal)">
下面的label中的for对应着input中的id值,input中要定义#ipt1=”ngModel”和required,下面的提示框是根据input的验证状态来实现显示或者隐藏。div中的itp1.valid对应的就是#ipt1所在的input中的状态,状态的值请看下面的状态表。提交按钮对应的是from表单的状态来实现是否可以按动
<form class="form-horizontal" #forma="ngForm" (ngSubmit)="onSubmit(showModal)"> <div class="form-group"> <label for="name" class="col-md-3 text-right">账号:</label> <div class="col-md-6"> <input class="form-control" #ipt1="ngModel" [(ngModel)]="name" name="name" id="name" required> </div> <div [hidden]="ipt1.valid || ipt1.pristine" class="alert alert-danger col-sm-6 col-sm-offset-1">账号是必须输入的</div></div><button type="submit" class="btn btn-default" [disabled]="!ngform.form.valid">提交</button></form>
状态 为真时的 CSS 类 为假时的 CSS 类控件 已经被访问过 ng-touched ng-untouched控件 值已经变化 ng-dirty ng-pristine控件 值是有效的 ng-valid ng-invalid
Diagnostic验证表单中数据的单词{{diagnostic}}在页面中可以使用这个来验证各种状态的值
0 0
- Angular2表单验证
- Angular2 响应式表单验证
- ng2-validation/angular2表单验证模块使用方法
- 《angular2入门系列实践》——表单验证详解
- angular2 之 form表单
- Angular2 表单form
- Angular2 之 Form 表单
- Angular2响应式表单
- angular2--笔记--表单创建
- Angular2 模版表单
- Angular2学习_2(表单)
- 4.揭秘angular2学习 ------- 表单
- Angular2 指令—表单指令
- 验证表单
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- Layer 图层圆角、边框 、底纹其他常用操作
- 搭建WebApi框架步骤
- 设置SELinux 策略规则 ? 在Kernel Log 中出现"avc: denied" 要如何处理?
- 你不知道你不懂 javascript
- docker 部署简单nginx服务器
- Angular2表单验证
- Maven中央库地址
- 开源蓝牙协议栈
- 11D日期巧算星座
- 自动化设备的软件框架
- 链表
- python引号与转义
- 写了 10 年 Javascript 未必全了解的连续赋值运算
- 相机系统综述 —— ISP