对于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. ZOJ 1913 J-Eucild's Game

    https://vjudge.net/contest/67836#problem/J Two players, Stan and Ollie, play, starting with two natu ...

  2. redis——持久化方式RDB与AOF分析

    https://blog.csdn.net/u014229282/article/details/81121214 redis两种持久化的方式 RDB持久化可以在指定的时间间隔内生成数据集的时间点快照 ...

  3. Jekyll 使用 Rouge 主题

    今日发现我的 Github Pages 中的代码并没有高亮,看了一下代码发现,原来的没有设置 css 样式的原因,我使用的代码高亮器是 rouge highlighter: rouge Rouge 是 ...

  4. html5 拖拽练习题

    html5新的拖拽 只支持Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 来一个实例: <!DOCTYPE html& ...

  5. java 读写文件乱码问题

    这样写,会出现乱码.原因是文件时gbk格式的, BufferedReader br = new BufferedReader(new FileReader(indir)); BufferedWrite ...

  6. IntellIJ IDEA 配置 Maven

    一.配置Maven环境 1.下载apache-maven文件,选择自己需要的版本 2.解压1所下载文件,E:\apache-maven-3.5.4 3.配置Maven环境变量 a. MAVEN_HOM ...

  7. [洛谷P4721]【模板】分治 FFT

    题目大意:给定长度为$n-1$的数组$g_{[1,n)}$,求$f_{[0,n)}$,要求: $$f_i=\sum_{j=1}^if_{i-j}g_j\\f_0=1$$ 题解:直接求复杂度是$O(n^ ...

  8. [洛谷P1714]切蛋糕

    题目大意:给你n个整数,求出其中长度不超过m的最大字段和. 题解:单调队列维护前缀和最小值,然后用当前值减去当前有效最小值即可 C++ Code: #include<cstdio> usi ...

  9. 存储引擎(Mysql)

    最常使用的2种存储引擎:1.Myisam是Mysql的默认存储引擎,当create创建新表时,未指定新表的存储引擎时,默认使用Myisam.每个MyISAM在磁盘上存储成三个文件.文件名都和表名相同, ...

  10. BZOJ1500:[NOI2005]维修数列——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1500 https://www.luogu.org/problemnew/show/P2042#su ...