Introduction Reactive Forms in Angular

Introduction Reactive Forms in Angular

Angular provides two types of forms:

Template-driven forms: Template directives are used to build an internal representation of the form. Here the source of truth lies in the template.

In template-driven forms, each form element is linked to a directive that manages the form model internally.

Reactive forms: provides a model-driven approach to handling form inputs whose values change over time. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.

With reactive forms, one has the power to build his representation of form in the component class. In reactive forms, the source of truth lies in the component class, i.e. the form model (like FormGroup or FormControl instance). The update from the model to the view and from the view to the model is synchronous.

Classes which form the base of the Angular Forms:

  1. AbstractControl: Base class for FormControl, FormGroup, and FormArray. It provides the shared properties and behavior that all controls and groups have.

  2. FormControl: Tracks the value and validation status of an individual form control. It maps to the single form element in the template.

  3. FormGroup: Tracks the value and validity state of a group of FormControl instances. It aggregates the values of each child FormControl into one object, with each control name as the key.

  4. FormArray: Tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances. aggregates the values of each child FormControl into an array.

  5. FormBuilder: A utility class used to create an AbstractControl from a user-specified configuration. It is used to create the instances of a FromControl, FormGroup, or FormArray.

Let us now get started with reactive forms in Angular.

Importing the ReactiveFormsModule

To work with ReactiveForms we will need to import the ReactiveFormsModule in our module.

This is image title

Template containing the form:

This is image title

formGroup: This directive allows us to give a name to our form. The form will be mapped to an instance of the FormGroup in the component class.

ngSubmit: The event triggered when the form is submitted. Here in our code when the form is submitted onSubmit method of the component is called.

formControlName: The directive takes a value which is the name for the FormControl in the component class.

The Component Class:

This is image title

Here in the component, we are using the FormBuilder service to create the FromGroup instance. The form name registerForm matches the value passed to formGroup property in the form template.

Each formControlName property value in the form template is mapped with the FormControl instance in the registerForm group. The FormControl instance can also take an array of Validators, that can be used to add the validation to the form.

This is all the required basics to implement the Reactive Forms..

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica