Slide 1

Slide 1 text

Angular Reactive Forms Susan Adelokiki NG2 - MEETUP

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Component Template

Slide 11

Slide 11 text

Component Class

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Thank You!

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

No content