Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Angular Forms

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.

Doug Corbett

December 06, 2017
Tweet

More Decks by Doug Corbett

Other Decks in Programming

Transcript

  1. Introduction to Angular Forms
    Wednesday December 6. 2017
    Doug Corbett
    [email protected]

    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