Angular 11 FormBuilder/FormGroup/FormArray and FormControl By Example

In Angular 11 FormBuilder/FormGroup/FormArray and FormControl By Example tutorial, we’ll learn to use Angular forms by creating a simple example using the FormBuilder, FormGroup, FormArray and FormControl APIs and the latest Angular 11 version.

We’ll see how to use Angular FormBuilder, FormGroup, FormArray and FormControl APIs then we’ll build a form.

Note: For a more complete step by step example with validation, check out Build Login & Reactive Form Example with Validation

Introducing Angular FormBuilder, FormGroup, FormArray and FormControl

Forms are used in most web applications as they allow users to submit input when interacting with the application. Among countless use cases, they are useful for sign users in, searching for information and submitting feedback.

Angular provides two approaches, template-driven forms and model-driven or reactive forms, for working with forms:

• The template driven approach makes use of built-in directives to build forms such as ngModel, ngModelGroup, and ngForm available from the FormsModule module.
• The model driven approach of creating forms in Angular makes use of FormControl, FormGroup. FormArray and FormBuilder available from the ReactiveFormsModule module.

According to the docs:

The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.

Throughout this tutorial, we’ll be learning to build forms in Angular using FormBuilder by creating form controls and groups using factory methods.

You can use the FormBuilder service, with the following steps:

• Import the FormBuilder service,
• Inject the FormBuilder service.
• Generate the form contents.

FormGroup is used to keep track of the value and validity state of a group of FormControl instances.

FormControl is used to keep track of the value and validation status of an individual form control.

We also have the following directives:

• FormControlName is a directive that links a FormControl in a FormGroup to a form control by name.
• FormGroupDirective is a directive that binds a FormGroup to a DOM element.
• FormGroupName is a directive that links a nested FormGroup to a DOM element.
• FormArrayName is a directive that links a nested FormArray to a DOM element.

Using FormGroup fot Angular 11 FormBuilder/FormGroup/FormArray and FormControl By Example

You can use FormGroup, as follows.

First, you need to import ReactiveFormsModule from the @angular/forms module in your application module and add it to the imports array of @NgModule as following:

import{NgModule}from'@angular/core';import{ReactiveFormsModule}from'@angular/forms';import{BrowserModule}from'@angular/platform-browser';@NgModule({imports:[BrowserModule,ReactiveFormsModule],})exportclassAppModule{}

ReactiveFormsModule provides the FormControl, FormGroup and FormArray APIs.

Next, you need to create an instance of FormGroup with the instances of FormControl:

productForm=newFormGroup({reference:newFormControl(),quantity:newFormControl('11')});

You can provide a default value for the control, bypassing it as an argument to the FormControl.

Next, we create a <form> element in our component’s template and we use [formGroup]to bind our FormGroup and formControlName directive to bind FormControl elements to HTML form controls:

<form[formGroup]="productForm">  Reference: <inputformControlName="reference"placeholder="Enter reference">  Quantity: <inputformControlName="quantity"placeholder="Enter quantity"><buttontype="submit">Submit</button></form>

These are the steps of this tutorial:

• Prerequisites
• Angular Forms, Step 1 — Installing Angular CLI 9
• Step 2 — Initializing your Angular 11 Project
• Step 3 — Adding a Reactive Form
• Step 3.1 — Importing the ReactiveFormsModule
• Step 3.2 — Importing FormControl and FormGroup
• Step 3.3 — Creating the FormGroup
• Step 3.4 — Creating the HTML Form
• Step 4 — Using the FormBuilder Module
• Conclusion

Prerequisites

This tutorial assumes you already have Node.js and npm installed on your machine.

You also need to be familiar with TypeScript and the basics of Angular such as components.

Let’s see how to install Angular 11 CLI.

Angular Forms, Step 1 — Installing Angular CLI 11

In this step, we’ll set up Angular CLI 11 in our development machine.

Angular CLI is built on top of Node.js so as mentionned before make sure you have it installed on your machine together with npm.

Angular CLI is the official tool for initializing and working with Angular projects.

In your terminal or command prompt run the following command:

$ npm install -g @angular/cli

This will install angular/cli v11.0.0 in our system.

That’s it, you can now initialize your project using this tool.

Step 2 — Initializing your Angular 11 Project

Go back to your terminal and run the following commands:

$ cd ~  $ ng new angular-forms-example

The CLI will prompt you if You would like to add Angular routing. You can type Yes if you need routing in your example and which stylesheet format you would like to use. You can select CSS.

Angular CLI will prepare your project, next you can navigate to your project’s folder and serve your app locally using a development server as follows

$ cd angular-forms-example$ ng serve

Your web application will be available from the http://localhost:4200/ address.

Go to web browser and navigate to the http://localhost:4200/ address:

Step 3 — Adding a Reactive Form

In this step, we’ll create an example HTML form. Next, we’ll create a form model in the application component using the FormGroup and FormControl APIs. Finally, we’ll use the formGroup, formControlName and formGroupName directives to bind our form model to our HTML form.

Step 3.1 — Importing the ReactiveFormsModule

Open the src/app/app.module.ts file and import the ReactiveFormsModule as follows:

import{ReactiveFormsModule}from'@angular/forms';imports:[...ReactiveFormsModule],

Step 3.2 — Importing FormControl and FormGroup, FormArray

Next, let’s import the FormControl and FormGroup classes in the src/app/app.component.ts file.

import{Component}from'@angular/core';import{FormControl,FormGroup,FormArray}from'@angular/forms';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponent{title='app';}

Step 3.3 — Creating the FormGroup

Next, let’s create an exampleForm instance of FormGroup with two firstName and lastName form controls as follows:

import{Component}from'@angular/core';import{FormControl,FormGroup}from'@angular/forms';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponent{title='app';exampleForm=newFormGroup({firstName:newFormControl(),lastName:newFormControl(),alias:newFormArray([newFormControl("")])});addNewAlias(){this.alias.push(this.fb.control(""));}getaliases(){returnthis.exampleForm.get("alias")asFormArray;}}

Step 3.4 — Creating the HTML Form

Next, we need to create an HTML form in the src/app/app.component.html file:

<h1>Angular 11 Forms Example</h1><form[formGroup]="exampleForm"><divclass="form-group"><label>First Name:</label><inputclass="form-control"formControlName="firstName"><label>Last Name:</label><inputclass="form-control"formControlName="lastName"><divformArrayName="alias"><h3>Add alias</h3><button(click)="addNewAlias();">Add another alias </button><div*ngFor="let  address of aliases.controls;  let i=index"><inputtype="text"[formControlName]="i"></div></div></div></form>

We use the formGroup property in the <form> tag to bind the form with our exampleForm form group and we use the formControlName property to bind the <input> tags to individual form controls.

Step 4 — Using the FormBuilder Module

The FormBuilder service provides three factory methods:

• control(),
• group(),
• and array().

The FormBuilder helps you create reactive forms using a simple functional API for creating form controls, form groups, and form arrays.

Inside the src/app/ap.component.ts file import the FormBuilder class from the @angular/forms package as follows:

import{Component}from'@angular/core';import{FormControl,FormGroup,FormBuilder}from'@angular/forms';

Next, inject FormBuilder in the component constructor as formBuilder

@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponent{title='app';exampleForm=newFormGroup({firstName:newFormControl(),lastName:newFormControl()});constructor(privateformBuilder:FormBuilder){}}

Next add a createForm() method with the following code:

createForm(){this.exampleForm=this.formBuilder.group({firstName:'',lastName:''});}

Finally call the method from the constructor:

constructor(privateformBuilder:FormBuilder){this.createForm();}

Conclusion for Angular 11 FormBuilder/FormGroup/FormArray and FormControl By Example

In this tutorial, we’ve seen a simple example of creating a form model and bind it to the HTML <form> element using Angular FormBuilder, FormGroup and FormControl APIs.

Hope this code and post will helped you for implement Angular 11 FormBuilder/FormGroup/FormArray and FormControl By Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github