Reactive forms are forms where we define the structure of the form in the component class. We create the form model with Form Groups, Form Controls, and Form Arrays. We define the validation rules in the component class. Then, we bind it to the HTML form in the template.
In the template-driven forms, we define the logic and controls in the HTML template. So, this way it differs from reactive forms.
FormControl
The FormControl is an object that encapsulates all the information related to the single input element. It Tracks the value and validation status of each of these control.
It takes 3 arguments. a default value, a validator, and an asynchronous validator. All of them are optional.
FormGroup
The FormGroup is a collection of Form controls. It tracks the value and validity state of a group of Form control instances. The FormGroup is one of the building blocks of the angular forms.
FormArray
The FormArray is a way to manage the collection of Form Controls in Angular. The controls can be a FormGroup, FormControl, or another FormArray.
Work Flow
Key differences between Reactive Forms and Template Driven forms
Why do we use Reactive forms?
Some of the advantages of Reactive Forms
Immutability
Predictability
Structured data flow
Scalability
Testing
Why do we use Reactive forms?
Step 1 — Setting Up the Project
Install Angular CLI – npm install – g @angular/cli
Create Project – ng new AppName
Navigate to the newly created project directory.
Step 2 — Add Reactive Forms Module in app.module.ts
Step 3 — Add Form in the Component
[formGroup]: It represents a collection of form Controls. It can also contain form groups and form arrays. An Angular form is a FormGroup.
(formControlName): It encapsulates the state of a single form element in our form. It stores the value and state of the form element and helps us to interact with them using properties & methods.
(ngSubmit): This is the event that will be triggered upon submission of the form.
Step 4 — Building Component Class – Defining Form Group
We need to import FormGroup, FormControl & Validator from the @angular/forms.
Define FormGroup and Individual Components within FormControls within FormGroup.
We initialize FormGroup in ngOnInit method.
The FormGroup and FormControl names are the same ones that were used in the HTML template.
Step 5 — Use of Form Builder in FormGroup
The FormBuilder is the helper API to build forms in Angular. It provides shortcuts to create the instance of the FormControl, FormGroup, or FormArray. It reduces the code required to write complex forms.
Step 6 — Adding Validators To FormControls
A Validator is a function that checks the instance of FormGroup, FormControl, or a FormArray and returns a list of errors. If the Validator returns a null means that validation has passed
It is passed as the second or third argument of FormGroup, FormControl, or FormArray.
The second argument is a collection of sync validators and the third argument is a collection of async validators.
Sync Validations
It runs validations and returns immediately. They either return a list of errors or null if no errors are found.
Async Validations
It returns a Promise or Observable. They either return a list of errors or null if no errors are found.
Build-in Validations
Some build-in validations provided by angular are :
required, minlength, maxlength, min, max, pattern
Step 7 — Accessing Form Values and Validations in HTML Template
valid: This property returns true if the element’s contents are valid and false otherwise.
invalid: This property returns true if the element’s contents are invalid and false otherwise.
dirty: This property returns true if the element’s contents have been changed.
We can access each FormControl’s value and validity and also the value and validity of the whole form group as a whole can we accessed.
If the value passed in FormControl is Invalid, it will display the error message.
When all the values in the form controls are valid only the Submit button will be enabled.
Conclusion
We used FormControl, FormGroup, FormBuilder, and Validators to construct an example form with validations.
HypeTeq is now
Prioxis Technologies
English