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

    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