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

NgNigeria Reactive Form

NgNigeria Reactive Form

Angular Reactive Form by Susan

Christian Nwamba

March 18, 2017
Tweet

More Decks by Christian Nwamba

Other Decks in Programming

Transcript

  1. Angular Reactive Forms
    Susan Adelokiki
    NG2 - MEETUP

    View Slide

  2. Hello
    ● Susan Adelokiki
    ● Software Developer at Andela
    ● More about me at susanadelokiki.com

    View Slide

  3. Forms
    Forms are very effective for business applications to help users interact with software.

    View Slide

  4. Angular Forms
    With Angular, we have the liberty to choose between two major form building
    techniques in receiving and accepting user input
    ● Template-driven Forms
    ● Reactive Forms

    View Slide

  5. View Slide

  6. Angular form-building blocks
    Angular makes use of building blocks to
    generate the form model. The building
    blocks are used by both reactive and
    template-driven forms. They are called
    FormGroup and FormControl.

    View Slide

  7. FormGroup and FormControl
    ● The FormGroup tracks values and states of the form controls. It takes the
    existing formGroup instance and matches it with an HTML element.
    ● The Form Control tracks values and states of input elements.
    ● Instances of this building block create the form model

    View Slide

  8. Form Model
    ● It represents the HTML structure
    ● It retains form states such as dirty, valid, invalid, etc.
    ● It is different from the data model.
    ● It is the same for template-driven and reactive forms but created differently.
    ● For template-driven forms, Angular generates the form model
    ● For reactive forms, Angular does not generate the form model rather it is
    generated from instances of the FormGroup and FormControl.

    View Slide

  9. Template-Driven Forms
    In Template-Driven forms, Responsibility for the form is heavy on the template
    with html and data-binding.
    ● Uses two way data-binding with the [(ngModel)] syntax to keep user entry and
    data model property in sync.
    ● Suitable for simple scenarios
    ● Angular generates Form Model by creating the instances FormGroup and
    FormControl

    View Slide

  10. Component Template

    View Slide

  11. Component Class

    View Slide

  12. Template-Driven Form Properties
    From previous image, we see that:
    ● It makes use of event-binding to submit
    ● It leverages HTML5 validation
    ● It leverages data-binding using ngModel

    View Slide

  13. Strengths of the Template-Driven Forms
    ● Straightforward and simple to use
    ● No need to write code to copy data into the input
    elements. Angular automatically generates them.
    ● Angular Automatically tracks the form and its
    data
    ● Minimal component code

    View Slide

  14. Weaknesses of Template-Driven Forms
    ● It does not provide the flexibility of creating form
    controls, Angular directives generates those
    controls based on information in the data-binding.
    ● Adding more & more validators to the input tag
    eventually makes it unreadable
    ● Template-driven forms are asynchronous and
    hence makes unit testing a little more complicated.

    View Slide

  15. Building a Simple Reactive Form
    ● Import your building blocks
    ● Specify a property for the root formGroup
    ● Create an instance of the FormGroup
    ● Update AngularModule by adding ReactiveFormsModule to the imports array
    and declarations
    ● Bind the form to the formGroup and the input elements to the associated
    formControl using the reactive form directives.

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Accessing Form Model Properties
    We can access the form model in two ways:
    ● Form Model Heirarchy
    E.g To access if the firstname input element is valid:
    CustomerForm.controls.firstName.valid
    ● Referencing the form control using the Form Group’s get method.
    CustomerForm.get(‘firstName’).valid

    View Slide

  21. setValue & patchValue
    These methods are used to initialize or reset values in the Form model

    View Slide

  22. Validation
    To implement validation, we simply import the Validators from @angular/forms.
    We then pass them in as a second argument to our formControl instances.

    View Slide

  23. View Slide

  24. Form Builder
    The Form Builder is useful when our forms get bigger and we have multiple form
    groups. It reduces repetition and clutter by handling control creation.
    ● Import the FormBuilder, we can take off the FormControl import.
    ● Inject the FormBuilder in the constructor.
    ● Use the FormBuilder instance to create the formGroup.

    View Slide

  25. View Slide

  26. Which is better?
    Template-driven forms is useful in making small scale apps which do not
    necessarily require control of the forms by the user.
    Reactive forms are very useful in more complex scenarios and large scale apps
    because there is flexibility on the form model and form building blocks and unit
    testing can easily be done.

    View Slide

  27. Thank You!

    View Slide

  28. DEMO

    View Slide

  29. View Slide