Angular基础(五) 内建指令和表单
来源:互联网 发布:查看应用程序端口号 编辑:程序博客网 时间:2024/05/23 02:03
Angular提供了一些内建的指令,可以作为属性添加给HTML元素,以动态控制其行为。
一、内建指令
a) *ngIf,可以根据条件来显示或隐藏HTML元素。
<div *ngIf='a>b'>show</div>,只有在a>b的时候才会显示这个div。
b)*ngSwitchCase,可以根据不同的条件,控制对应的HTML元素的显示。
<div[ngSwitch]='myVar'>
<div *ngSwitchCase="'a'">vara</div>
<div *ngSwitchCase="'b'">varb</div>
<div *ngSwitchDefault>vardefault</div>
<div *ngSwitchCase="'b'">varb2</div>
</div>
没有匹配的条件时,显示*ngSwitchDefault。如果myVar=’b’,对应的两个div都会显示,放在* ngSwitchDefault也不会受影响。
c)ngStyle,用来控制CSS样式。
<span[ngStyle]="{color: theColor}"[style.font-size.px]="fontSize">
red text
</span>
这儿的theColor和fontSize为ts代码中的属性。frontSize必须指定单位,如[style.font-size.px]、[style.font-size.em]等。
d) Indexof ngFor
<div*ngFor="let c of cities;let num=index">
<div> {{num+1}}-{{c}}</div>
</div>
定义let num=index后,num就可记录循环次数了。
e) ngNonBindable
模型绑定使用{{}}的语法,如果需要输出{{}}这样的文本,可以使用ngNonBindable。
<divngNonBindable>{{cities[0]}}</div>
二、Form
关于在Angular程序的Form,主要用到三个对象,FormControls用于处理用户输入,Validators用于输入校验,Observers用于检测数据变化并响应输入动作。
a)FormControl和FormGroup
FormControl代表输入框的一个最小单元,然后可以用FormGroup来整合一个Form表单所有的FormControl。
创建Form的方式有两种,可以在app.module中引入FormsModule或ReactiveFormsModule,要使用Form的功能,必须引入其一。
FormsModule包含的指令为ngModel和NgForm,ReactiveFormsModule包含的指令为formControl和ngFormGroup。
b)比如创建这样一个简单的Form
html为:
这里使用了ngForm,属于第一种方式FormControl,定义了FormGroup以及(ngSubmit)输出,并把ngForm绑定到了#f变量,所以onSubmit传递的参数为f.Value,就是当前的FormGroup,点击提交,拿到的对象为:Object { sku: "xxx" }。
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
ngModel是NgModel的选择器,可以使用ngModel=”XXX”的形式指定属性值,但这里没有指定值,则采用的是单向绑定的方式,而且通过在input放置ngModel,也创建了一个FormControl,当前只有一个输入单元name=”sku”。这个FormControl会自动被添加到父元素也就是<form>上。
c)如果要为已经存在的FormGroup或FormControls绑定Form单元,可以使用ReactiveFormsModule的FormBuilder。
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'sku': ['ABC123']
});
}
这段代码使用了FormBuilder,然后在html模板使用[formGroup]。
学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda
- Angular基础(五) 内建指令和表单
- Angular 中间部分 2.1 内置指令和表单
- angular基础指令
- Angular js指令收录(五)
- angular指令和自定义指令
- angular总结-directive指令基础
- angular常用的表单验证指令
- Angular中的内置指令和自定义指令
- Angular中的内置指令和自定义指令
- angular指令和指令之间的交互
- angular.js基础(1)--指令directive
- Unix命令行程序和内建指令
- UNIX命令行程序和内建指令
- Unix命令行程序和内建指令
- Unix命令行程序和内建指令
- Angular自定义指令实现一般性的表单验证
- angular指令
- angular指令
- solr搭建过程中控制台报错: Can't find (or read) directory to add to classloader: ../../../contrib/extraction/li
- 【特征检测】HOG特征算法
- Eclipse 开发工具基础配置
- Centos7.3安装vsftp服务
- Demo积累
- Angular基础(五) 内建指令和表单
- 管理学笔记-作为领导如何管理自己
- 2017/8/21
- HOG特征提取代码(opencv处理基本数据,c语言实现基本算法)
- 守护进程
- 寨北社区党员分享会
- Codeforces 757 C Felicity is Coming! 【STL+思维】
- Diffie-Hellman密钥交换算法的JavaScript实现
- php获取apk包信息的类