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
   

   View Slide

2. Agenda
   Very Brief Overview
   1
   Template-based Forms
   3
   Reactive Forms
   4
   Final Thoughts
   5
   Common Concerns
   2
   

   View Slide

3. Very Brief Overview
   

   View Slide

4. We are going to discuss …
   

   View Slide

5. We are going to discuss …
   Angular Forms
   

   View Slide

6. We are going to discuss …
   Angular Forms
   Assumptions: None really
   

   View Slide

7. Common Concerns
   

   View Slide

8. Purpose of Forms
   • manipulate data
   • validation
   • enable controls based on validity
   • feedback to the user
   

   View Slide

9. Common to Angular Forms
   • Both rely on FormGroup and FormControl
   • Both inherit from AbstractControl
   • Can nest FormGroups
   

   View Slide

10. Form and Control States
    • dirty / pristine
    • touched / untouched
    • valid
    • errors collection
    Field 1:
    Field 2:
    Field 3:
    Cancel Save
    

    View Slide

11. Vocabulary
    Form model – represents the html form, including controls, value, state, errors.
    Not the same as the data model
    

    View Slide

12. Vocabulary
    Data Model - Representation of the data to be saved or otherwise processed.
    

    View Slide

13. Model Diagram
    HTML Form Model Data Model API/DB
    

    View Slide

14. Template-based Forms
    

    View Slide

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.
    

    View Slide

16. Anatomy
    Template - HTML that includes the following
    • Form
    • form controls
    • data binding details
    • validation
    Component
    • Properties for data binding
    • supporting methods
    

    View Slide

17. Vocabulary
    Template reference variable – a way to reference FormGroups and FormControls in the
    HTML
    Examples: #f="ngForm"
    #inputVar="ngModel"
    

    View Slide

18. Vocabulary
    Two-way data binding – how Angular binds model properties to a template.
    
    type=“text”
    [(ngModel)] = “datamodel. someField”
    name=“someField”
    #someFieldVar=“ngModel” />
    
    

    View Slide

19. HTML Form
    

    View Slide

20. Template Driven Form
    Demo
    

    View Slide

21. What’s Missing ?
    

    View Slide

22. What’s Missing ?
    Need to respond dynamically to user entered data.
    

    View Slide

23. What’s Missing ?
    Need to respond dynamically to user entered data.
    Dynamic validation based on user entry.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

26. Reactive Forms
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

29. Ways to access Form Model Properties
    1. speakerForm.controls.firstName.valid
    2. speakerForm.get('firstName').valid
    3. firstName = new FormControl();
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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();
    

    View Slide

33. Dynamic Behavior
    We can leverage observables
    by listening to formControls’ valueChanged event.
    by using the debounce function to provide a nicer user experience.
    

    View Slide

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.
    

    View Slide

35. Vocabulary
    Attribute binding – a way to assign html attributes values based on dynamic
    values produced in Angular
    Examples: attr.for="{{ 'title' + i }}"
    

    View Slide

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
    

    View Slide

37. Final Thoughts
    

    View Slide

38. Final Thoughts
    Both template-based and reactive forms allow us to build forms to manage application
    data.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide