Angular基础(五) 内建指令和表单
2019獨角獸企業重金招聘Python工程師標準>>>
?
?
?
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
?
?
轉載于:https://my.oschina.net/u/2327858/blog/1518304
總結
以上是生活随笔為你收集整理的Angular基础(五) 内建指令和表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java面向对象抽象类案例分析
- 下一篇： springboot(七)：spring