对于Angular2.0 的Form表单中的隐藏和验证,个人觉得还是挺有意思的。

1.通过ngModel 跟踪修改状态与验证。

在表单中使用 ngModel 可以获得更多的控制权,包括一些常用的验证。

ngModel 不仅仅可以跟踪状态(表单中各个控件的状态)还可以用特定的Angular CSS 类来更新控件,以表达当前的状态

(如显示和隐藏)

ng-touched:控件已被访问过的css 类; ng-untouched 为没有被访问过的CSS 类

ng-dirty :控件值已经发生变化,ng-pristine 没有

ng-valid 控件值有效;ng-invalid 无效

如下,我们可以通过这种方式对class name 进行监控

先设置css

.ng-valid[required], .ng-valid.required  {
border-left: 5px solid #42A948; /* green */
} .ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}

然后通过param.className监控

<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#param >
<br>
current class name :{{param.className}}

2.显示和隐藏验证提示信息

<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel" >
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>

需要注意的是,我们在input 标签中添加了个#name 变量。然后将ngModel 赋值给这个参数。

后年的name.valid 和 name.pristine 中的name 是这个参数变量 name

为什么是 “ngModel”? 指令的 exportAs 属性告诉 Angular 如何链接模板引用变量到指令。 这里把name设置为ngModel是因为ngModel指令的exportAs属性设置成了 “ngModel“

3.ngSubmit 和ngForm

ngForm 是Angular 自己创建的指令,并附加到form 标签上。

他是为了给form 元素扩充额外的特性。 它持有通过ngModel指令和name属性为各个元素创建的那些控件,并且监视它们的属性变化,包括有效性。

它还有自己的valid属性,只有当其中所有控件都有效时,它才有效。

<div [hidden]="submitted">
<h1>Form</h1>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required
name ="name" [(ngModel)]="model.name" #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="model.alterEgo" name ="alterEgo">
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select id="power" class="form-control" required
[(ngModel)]="model.power" name ="power">
<option *ngFor ="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
<button class="btn btn-default" [disabled] ="!heroForm.form.valid" >Submit</button>
</form>
</div>

如上code 将ngForm 赋值给一个变量,这样这个变量就代表了这个form的整体,并且可以通过这个变量来获取form 的属性。

Angular2.0 基础: Form的更多相关文章

  1. Angular2.0 基础: User Input

    1.Angular 2.0 中的变量 对输入值的获取,我们可以通过$event 来获取,也可以通过变量来获取. template: ` <input (keyup)="onKey($e ...

  2. Angular2.0 基础:双向数据绑定 [(ngModel)]

    在属性绑定中,值从模型到屏幕上的目标属性 (property). 通过把属性名括在方括号中来标记出目标属性,[]. 这是从模型到视图的单向数据绑定. 而在事件绑定中,值是从屏幕上的目标属性 到 mod ...

  3. Angular2.0 基础: 环境搭建

    最近在学习Angular2的使用,其实看过Angular2 文档的都知道,相比于之前的Angular1,Angular2 的改动还是挺大的. 而对于‘angular2 的本地开发环境的搭建的中,我们首 ...

  4. Angular2.0快速开始

    参考资料: Angular2.0快速开始 AngularJS2 教程

  5. Webstorm 下的Angular2.0开发之路

    人一旦上了年纪,记忆力就变得越来越不好. 最近写了许多的博文,倒不是为了给谁看,而是方便自己来搜索,不然一下子又忘记了. 如果恰巧帮助到了你,也是我的荣幸~~~~~~~~~~~~ 废话不多说,看正题~ ...

  6. <-0基础学python.第一课->

    初衷:我电脑里面的歌曲很久没换了,我想听一下新的歌曲,把他们下载下来听,比如某个榜单的,但是一首一首的点击下载另存为真的很恶心 所以我想有没有办法通过程序的方式来实现,结果还真的有,而且网上已经有有人 ...

  7. Android 工程在4.0基础上混淆

    Android现在对安全方面要求比较高了,我今天要做的对apk进行混淆,用所有的第三方工具都不能反编译,作者的知识产权得到保障了,是不是碉堡了. 一,首先说明我这是在4.0基础上进行的. 先看看pro ...

  8. Android程序开发0基础教程(一)

    程序猿学英语就上视觉英语网 Android程序开发0基础教程(一)   平台简单介绍   令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操 ...

  9. swift3.0基础语法

    swift 3.0 基础语法 目录 01-变量和常量 02-运算符 03-可选项 04-条件语句 05-循环 06-字符串 07-元组 08-数组 09-字典 10-对象和类 11-枚举 12-属性 ...

随机推荐

  1. 某一线互联网公司前端面试题js部分总结

    js部分 1,使用严格模式的优点 - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度 ...

  2. Android基础------SQLite数据库(二)

    1.操作SQLite数据库 1.1 execSQL() 可以执行insert.delete.update和CREATE TABLE之类有更改行为的SQL语句 1.2 rawQuery() 可以执行se ...

  3. AngularJS 中特性(attr)和属性(prop)的区别

    attr() 和 removeAttr() 方法是对特性进行处理的, 而 prop() 是对属性进行操作的 , 但是很多时候操作的东西是同一个 , 但是也是有区别的, 区别在于prop方法处理的是被 ...

  4. Matlab 函数ndims简介,flipdim简介

    ndims是matlab中求一个数组维数的函数. 调用格式: n=ndims(A) 将A的维数返回给变量n.n>=2 n=ndims(A)与n=length(size(A))是等价的 MATLA ...

  5. RT-thread内核之线程调度算法

    一个操作系统如果只是具备了高优先级任务能够“立即”获得处理器并得到执行的特点,那么它仍然不算是实时操作系统.因为这个查找最高优先级线程的过程决定了调度时间是否具有确定性,例如一个包含n个就绪任务的系统 ...

  6. Chrome查看html样式基本操作-div

    1. div 标签(白板,块级标签),想学会前端,只需要学会div+css就可以了. span 标签 (白板,行内标签) 2. Chrome审查元素的使用.右击浏览器--检查---可以看标签是块级还是 ...

  7. 【刷题】洛谷 P2764 最小路径覆盖问题

    题目描述 «问题描述: 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V 中每个顶点恰好在P 的一条路上,则称P是G 的一个路径覆盖.P 中路径可以从V 的任何一个顶点开 ...

  8. CF724E Goods transportation

    最大流既视感 然后 TLEMLE既视感 然后 最大流=最小割 然后 dp[i][j]前i个点j个点在S集合,最小割 然后 dp[i][j]=min(dp[i-1][j]+p[i]+j*c,dp[i-1 ...

  9. [CQOI2011]放棋子

    想到了50%吧算是. f[i][j][k]表示,前i种,占了j行k列.方案数. 发现,转移要处理:“用c个棋子,占据n行m列”的方案数. 设g[i][j][k]表示,i行j列用k个棋子占的方案数.直接 ...

  10. The database cluster was initialized with RELSEG_SIZE 1048576, but the server was compiled with RELSEG_SIZE 8388608

    由于一次误操作,将线上机器的数据库程序目录删除,虽然不影响程序的正常使用,数据也未丢失,但后面如果出现服务器宕机或数据库宕机,数据库将无法启动,而且数据库对应的编译参数也已无法查看,所以征得开发同意后 ...