REACTIVE FORMS IN ANGULAR

 In blog, Business, Code Quality

Introduction

Angular is providing two ways to work with forms: 

Both ways work differently.

What are Reactive forms?

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

  1. Immutability
  2. Predictability
  3. Structured data flow
  4. Scalability
  5. Testing

How to 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.

Recent Posts

Leave a Comment

Start typing and press Enter to search