angular2 form
TRANSCRIPT
![Page 2: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/2.jpg)
2
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 3: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/3.jpg)
3
結果畫面
![Page 4: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/4.jpg)
4
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 5: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/5.jpg)
5
下載 快速起步 專案• Angular QuickStart Source• https://github.com/angular/quickstart/blob/master/
README.md
![Page 6: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/6.jpg)
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’);
![Page 7: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/7.jpg)
7
hero-form.component• 建立 hero\hero-form.component.ts • 建立 hero\hero-form.component.html
![Page 8: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/8.jpg)
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‘
![Page 9: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/9.jpg)
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
![Page 10: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/10.jpg)
10
html5 input’s Required 屬性• <input type="text" name="name" required>
![Page 11: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/11.jpg)
11
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 12: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/12.jpg)
12
ngModel – No Binding• Html Element 一定要有 name<input type="text" id="name" class="form-control" required ngModel>
![Page 13: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/13.jpg)
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 屬性
![Page 14: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/14.jpg)
14
[(ngModel)]• [(ngModel)]
[(ngModel)]="model.name"
• [ngModel] + (ngModelChange)[ngModel]="model.name" (ngModelChange)="model.name=$event"
![Page 15: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/15.jpg)
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>
![Page 16: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/16.jpg)
16
diagnostic 屬性• component.ts • JSON.stringify(this.model)
• component.html• {{ model | json }}
![Page 17: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/17.jpg)
17
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 18: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/18.jpg)
18
ngModel’s CSS ClassName• ng-touched / ng-untouched ( 需要 unfocus 才會變 )• ng-dirty / ng-pristine• ng-valid / nginvalid
![Page 19: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/19.jpg)
19
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 20: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/20.jpg)
20
hero-component.css• styleUrls:['hero-form.component.css']
![Page 21: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/21.jpg)
21
學習目標• 使用 component & template 建立 form• 使用 [(ngModel)] 實現雙向數據綁定• 使用 ngModel 來追蹤狀態變化• 搭配 CSS 來控制 HTML elements• 使用 template reference variables
![Page 22: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/22.jpg)
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>
![Page 23: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/23.jpg)
23
# 變數 遇到 *ngIf • ngIf 讓它不見後• # 變數 就變成了 undefined • <form *ngIf="active" (ngSubmit)="onSubmit()"
#heroForm="ngForm">• </form>• {{heroForm.value}}
![Page 24: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/24.jpg)
24
NgForm• 普通的 form 元素扩充了更多特性• heroForm.value | json• heroForm.form.valid
<button type="submit" class="btn btn-primary“ [disabled]="!heroForm.form.valid"> Submit</button>
![Page 25: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/25.jpg)
25
學習心得• 使用 Chrome 來測試,錯誤訊息比較清楚
![Page 26: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/26.jpg)
26
上次會議討論
![Page 27: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/27.jpg)
27
index.html 中是否可以放 2 個 component• 只能有一個 Root Component ! • 可放 2 個,另一個會失效• bootstrap 只有一個 component 呀 !
![Page 28: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/28.jpg)
28
如何 Debug• tsc 會產生• js, js.map
• 開啟 Chrome 開發人員工具列, Source • 跟 Debug js 一樣,只是開啟 ts 檔來 debug
![Page 29: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/29.jpg)
29
參考資源• Angular2 – 5.表單• Enable Browser's Source Maps• 範例• https://github.com/rainmakerho/ng2-5form
![Page 30: Angular2 Form](https://reader035.vdocuments.net/reader035/viewer/2022081517/58ed1c081a28ab73658b456d/html5/thumbnails/30.jpg)
30
FAQ