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