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

1. 亂馬客依 ng2 官網範例學習
內容來自於 ng2 官網

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

6. let myHero = new Hero(1,
‘SkyLuke’,
‘唬爛’,
‘Egg’);
let myHero2 = new Hero(2,
‘EggMan’,
‘Throw Eggs’);

9. FormsModule
HeroFormComponent
<= 這個Module
需要的 modules
<= 這個Module
需要的 component,
directives, pipes

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

13. [(ngModel)]="model.alterEgo" name="alterEgo"

15. ngModel
[ngModel]="model.name"
[(ngModel)]="model.name"

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

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

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

22. valid pristine

24. [disabled]="!heroForm.form.valid"

29. Angular2 – 5.表單
Enable Browser's Source Maps