Angular基础(五) 内建指令和表单
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