Introduction to Angular Forms

This presentation discuss advantages and disadvantages of Template-Driven forms and Model-Driven forms. We will take a look at the code required to make both run and give you some guidelines to help you decide which to use. This presentation is aimed at developer just getting started with Angular.

Transcript

1. Introduction to Angular Forms Wednesday December 6. 2017 Doug Corbett dougccorbett@gmail.com
2. Agenda Very Brief Overview 1 Template-based Forms 3 Reactive Forms 4 Final Thoughts 5 Common Concerns 2
3. Very Brief Overview
4. We are going to discuss …
5. We are going to discuss … Angular Forms
6. We are going to discuss … Angular Forms Assumptions: None really
7. Common Concerns
8. Purpose of Forms • manipulate data • validation • enable controls based on validity • feedback to the user
9. Common to Angular Forms • Both rely on FormGroup and FormControl • Both inherit from AbstractControl • Can nest FormGroups
10. Form and Control States • dirty / pristine • touched / untouched • valid • errors collection Field 1: Field 2: Field 3: Cancel Save
11. Vocabulary Form model – represents the html form, including controls, value, state, errors. Not the same as the data model
12. Vocabulary Data Model - Representation of the data to be saved or otherwise processed.
13. Model Diagram HTML Form Model Data Model API/DB
14. Template-based Forms
15. Directives FormsModule • ngForm - access form model • ngModel - two way binding • ngModelGroup - grouping input elements within the form Notes: Angular creates the form model for us in template driven forms.
16. Anatomy Template - HTML that includes the following • Form • form controls • data binding details • validation Component • Properties for data binding • supporting methods
17. Vocabulary Template reference variable – a way to reference FormGroups and FormControls in the HTML Examples: #f="ngForm" #inputVar="ngModel"
18. Vocabulary Two-way data binding – how Angular binds model properties to a template. <form (ngSubmit)=“save()” #sampleForm=“ngForm”> <input id=“someField” type=“text” [(ngModel)] = “datamodel. someField” name=“someField” #someFieldVar=“ngModel” /> </form>
19. HTML Form
20. Template Driven Form Demo
21. What’s Missing ?
22. What’s Missing ? Need to respond dynamically to user entered data.
23. What’s Missing ? Need to respond dynamically to user entered data. Dynamic validation based on user entry.
24. What’s Missing ? Need to respond dynamically to user entered data. Dynamic validation based on user entry. Need to handle multiple child data dynamically.
25. What’s Missing ? Need to respond dynamically to user entered data. Dynamic validation based on user entry. Need to handle multiple child data dynamically. Easy Testability
26. Reactive Forms
27. Directives ReactiveFormsModule • formGroup - to bind the form element in the template to the root formGroup element of the Form Model, tells Angular not to build its own form model • formControl • formControlName - used to bind each input element to its associated form control • formGroupName • formArrayName Notes: We create the form model when using reactive forms.
28. Anatomy Template - HTML that includes the following • form • form controls • data binding details Component • create the form model • Validation • Properties for data binding • supporting methods
29. Ways to access Form Model Properties 1. speakerForm.controls.firstName.valid 2. speakerForm.get('firstName').valid 3. firstName = new FormControl();
30. FormBuilder FormBuilder is a class we can use to build a form model based on configuration. It is a factory that creates formGroups, FormControls and FormArrays.
31. Validation 1. Built-in • Validators.required • Validators.pattern • Validators.minLength(10) 2. Custom – Allow you to create your own custom rules, like “age must be between 18 and 130. 3. Cross field – custom validation applied at the formGroup level possibly taking into consideration two or more formControls contained within the formGroup.
32. Dynamic Validation We can add or remove validation based on user actions. mycontrol.clearValidators(); mycontrol.setValidators(Validators.required); mycontrol.setValidators([ Validators.required, Validators.maxLength(30) ]); mycontrol.updateValueAndValidity();
33. Dynamic Behavior We can leverage observables by listening to formControls’ valueChanged event. by using the debounce function to provide a nicer user experience.
34. Dynamically duplicate elements on a form We can encapsulate a group of formControls in a formGroup and create a formArray of this formGroup. Examples: Addresses Phone Numbers Notes Websites etc. And even these can be nested.
35. Vocabulary Attribute binding – a way to assign html attributes values based on dynamic values produced in Angular Examples: attr.for="{{ 'title' + i }}"
36. Easier Testability Encapsulating business logic in classes allows for easier testability. Reactive forms relies on class components to define the form model and some business rules and it has access to the data model. All of these elements can be tested directly. This is not so with template-based forms. Demo
37. Final Thoughts
38. Final Thoughts Both template-based and reactive forms allow us to build forms to manage application data.
39. Final Thoughts Both template-based and reactive forms allow us to build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers.
40. Final Thoughts Both template-based and reactive forms allow us to build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers. Depending on your needs, neither is considered better than the other … however
41. Final Thoughts Both template-based and reactive forms allow us to build forms to manage application data. Template-based forms are easier to work with and will be familiar to Angular 1.x developers. Depending on your needs, neither is considered better than the other … however Reactive forms provides all the power of template based forms and then some.
42. Reference Materials Official Angular Documentation https://angular.io/guide/forms Angular 4 Front to Back – Brad Traversy https://www.udemy.com/angular-4-front-to-back Angular Reactive Forms https://app.pluralsight.com/library/courses/angular-2-reactive-forms ng-book – The Complete Book on Angular 4 – Nathan Murray and Ari Lerner Event Demo code https://github.com/dougcorbett/event-demo