Angular 2表單亂馬客 1依 ng2 官網範例學習內容來自於 ng2 官網

2

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

3

結果畫面

4

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

5

下載 快速起步 專案• Angular QuickStart Source• https://github.com/angular/quickstart/blob/master/

README.md

6

Hero Classexport class Hero{ constructor( public id:number, public name:string, public power:string, public alterEgo?:string ) {}}

let myHero = new Hero(1,

‘SkyLuke’, ‘唬爛’ ,

‘Egg’);

let myHero2 = new Hero(2,

‘EggMan’,

‘Throw Eggs’);

7

hero-form.component• 建立 hero\hero-form.component.ts • 建立 hero\hero-form.component.html

8

@Component’s moduleId• moduleId:module.id• 使用相對 templateUrl 位址

• app/hero/hero-component.html• templateUrl:'app/hero/hero-form.component.html‘

• =>

• moduleId:module.id, • templateUrl:'hero-form.component.html‘

9

app.module• import { FormsModule } from '@angular/forms';• import { HeroFormComponent } from './hero/hero-

form.component';

@NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HeroFormComponent ], bootstrap: [ AppComponent ]})

<= 這個 Module需要的 modules<= 這個 Module需要的 component, directives, pipes

10

html5 input’s Required 屬性• <input type="text" name="name" required>

11

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

12

ngModel – No Binding• Html Element 一定要有 name<input type="text" id="name" class="form-control" required ngModel>

13

Two-way binding<div class="form-group"> <label for="alterEgo" class="control-label">Alter </label> <input type="text" id="alterEgo" class="form-control" [(ngModel)]="model.alterEgo" name="alterEgo"></div>

label for => id 屬性ngModel => name 屬性

14

[(ngModel)]• [(ngModel)]

[(ngModel)]="model.name"

• [ngModel] + (ngModelChange)[ngModel]="model.name" (ngModelChange)="model.name=$event"

15

0,1,2 way binding<form #frmBinding="ngForm">

<input type="text" name="noBinding" ngModel > <br/> <input type="text" name="oneWayBinding"

[ngModel]="model.name" > <br/> <input type="text" name="twoWayBinding"

[(ngModel)]="model.name" ></form><p>

{{ frmBinding.value | json }}</p>

16

diagnostic 屬性• component.ts • JSON.stringify(this.model)

• component.html• {{ model | json }}

17

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

18

ngModel’s CSS ClassName• ng-touched / ng-untouched ( 需要 unfocus 才會變 )• ng-dirty / ng-pristine• ng-valid / nginvalid

19

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

20

hero-component.css• styleUrls:['hero-form.component.css']

21

學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables

22

# 變數 =“ngModel”<input type="text" id="name" class="form-control" required [(ngModel)]="model.name" name="name"#spyName #name="ngModel"><div [hidden]="name.valid || name.pristine"

class="alert alert-danger">Name is required

</div>

23

# 變數 遇到 *ngIf • ngIf 讓它不見後• # 變數 就變成了 undefined • <form *ngIf="active" (ngSubmit)="onSubmit()"

#heroForm="ngForm">• </form>• {{heroForm.value}}

24

NgForm• 普通的 form 元素扩充了更多特性• heroForm.value | json• heroForm.form.valid

<button type="submit" class="btn btn-primary“ [disabled]="!heroForm.form.valid"> Submit</button>

25

學習心得• 使用 Chrome 來測試，錯誤訊息比較清楚

26

上次會議討論

27

index.html 中是否可以放 2 個 component• 只能有一個 Root Component ! • 可放 2 個，另一個會失效• bootstrap 只有一個 component 呀 !

28

如何 Debug• tsc 會產生• js, js.map

• 開啟 Chrome 開發人員工具列， Source • 跟 Debug js 一樣，只是開啟 ts 檔來 debug

29

參考資源• Angular2 – 5.表單• Enable Browser's Source Maps• 範例• https://github.com/rainmakerho/ng2-5form

30

FAQ