Angular2.0 基础： Form

对于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" requiredname ="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 的属性。

转载于:https://www.cnblogs.com/taoyoung/p/ngForm.html

Angular2.0 基础： Form相关推荐

Angular2.0 基础: User Input
1.Angular 2.0 中的变量对输入值的获取,我们可以通过$event 来获取,也可以通过变量来获取. template: `<input (keyup)="onKey($ev ...
form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
Angular2.0快速开始
目前Angular2.0开发者预览版已经发布,和Angular1.x相比,发生了很多颠覆性的变化,随后Angular2团队在官网上给出了一个5分钟快速开始的教程,用于编写一个hello world级别 ...
android checkbox监听另一个checkbox选中和不选中_一个真正0基础小白学习前端开发的心路历程...
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
一个真正0基础小白学习前端开发的心路历程
摘要:真正的0基础小白学习前端开发的心路历程. 距离第一阶段的结束敲响了末尾的声音,抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪 ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
java基础入门传智播客源码_Java-_2020年版Java零基础视频教程（Java 0基础，Java初学入门）魔鬼讲师老杜出品...
不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源还记得那年带你Java入门的一声"吼"吗? B站目前播放量已经快到450多万播放量的Java零基础教程的创作者& ...
Python适合初学者或者0基础学习吗?
Python适合初学者或者0基础小白学习吗?很多人都比较关注这个问题,因为近几年Python在互联网行业的发展显而易见,它的就业几率也非常高,具体来看看下面的详细介绍吧. Python适合初学者或者0 ...
0基础学怎么学习python
Python相对于其他编程语言来说是比较简单的,非常适合零基础的小白学习,想要进入到互联网行业,可以优先选择学习Python,那么下面小编就来为大家详细的介绍一下0基础学怎么学习python? ...

Angular2.0 基础： Form

Angular2.0 基础： Form相关推荐

最新文章

热门文章