Angular2 Form
Download as PPTX, PDF0 likes115 views
文档详细介绍了如何使用 Angular 2 的组件和模板来构建表单，包括双向数据绑定、状态跟踪以及如何使用 CSS 控制 HTML 元素。示例中提到使用模板引用变量来管理表单控件。还强调了验证表单和启用浏览器源映射的重要性。
![• 使用 component & template 建立 form
• 使用 [(ngModel)] 實現雙向數據綁定
• 使用 ngModel 來追蹤狀態變化
• 搭配 CSS 來控制 HTML elements
• 使用 template reference variables](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-4-320.jpg)
![• 使用 component & template 建立 form
• 使用 [(ngModel)] 實現雙向數據綁定
• 使用 ngModel 來追蹤狀態變化
• 搭配 CSS 來控制 HTML elements
• 使用 template reference variables](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-11-320.jpg)
![[(ngModel)]="model.alterEgo" name="alterEgo"](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-13-320.jpg)
![ngModel
[ngModel]="model.name"
[(ngModel)]="model.name"](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-15-320.jpg)
![• 使用 component & template 建立 form
• 使用 [(ngModel)] 實現雙向數據綁定
• 使用 ngModel 來追蹤狀態變化
• 搭配 CSS 來控制 HTML elements
• 使用 template reference variables](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-17-320.jpg)
![• 使用 component & template 建立 form
• 使用 [(ngModel)] 實現雙向數據綁定
• 使用 ngModel 來追蹤狀態變化
• 搭配 CSS 來控制 HTML elements
• 使用 template reference variables](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-19-320.jpg)
![• 使用 component & template 建立 form
• 使用 [(ngModel)] 實現雙向數據綁定
• 使用 ngModel 來追蹤狀態變化
• 搭配 CSS 來控制 HTML elements
• 使用 template reference variables](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-21-320.jpg)
![[disabled]="!heroForm.form.valid"](https://image.slidesharecdn.com/ng2-form-170106061923/85/Angular2-Form-24-320.jpg)
Angular2 Form
- 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
- 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
- 29. Angular2 – 5.表單 Enable Browser's Source Maps
Editor's Notes
- #2: https://angular.cn/docs/ts/latest/guide/forms.html
- #3: https://angular.cn/docs/ts/latest/guide/forms.html
- #4: https://github.com/angular/quickstart/blob/master/README.md
- #5: https://angular.cn/docs/ts/latest/guide/forms.html
- #12: https://angular.cn/docs/ts/latest/guide/forms.html
- #18: https://angular.cn/docs/ts/latest/guide/forms.html
- #20: https://angular.cn/docs/ts/latest/guide/forms.html
- #22: https://angular.cn/docs/ts/latest/guide/forms.html