Using FormBuilder In Angular

Forms are an essential component of every application. Forms are used by applications to let users to log in, update their profiles, enter sensitive information, and do a variety of other data-entry activities.

Angular assists us in managing these diverse data handling duties through two sorts of forms: reactive and template-driven. Both take user input events from the view, evaluate the user input, build an updateable form model and data model, and give a means to monitor changes. However, there are some distinctions. Reactive forms are more durable since they are scalable, reusable, and testable. Template-driven forms are excellent for adding a simple form, such as a user list signup form, to an app.

Creating Controls using FormBuilder
This post will teach you how to create forms in Angular using FormBuilder. When dealing with several forms, manually creating multiple form control objects may get tedious. The FormBuilder service offers simple techniques for creating controls.

Follow the steps below to utilise the FormBuilder service:

Import the FormBuilder class.
Inject the FormBuilder service.
Generate the form contents.
Consider the following examples of how to rework an EmployeeDetailsEditor component to utilise the FormBuilder service to construct form control and form group instances.

Bring in the FormBuilder Class.
Import the @angular/forms package’s FormBuilder class.

File name : employeeDetails-editor.component.ts

import { FormBuilder } from '@angular/forms';

Bring in the FormBuilder Class.
Import the @angular/forms package’s FormBuilder class.

File name : employeeDetails-editor.component.ts

constructor(private fb: FormBuilder) { }

Make Form Controls
There are three methods in the FormBuilder service: control(), group(), and array() (). These are factory methods for creating instances of form controls, form groups, and form arrays in your component classes.

To build the employeeDetailsForm controls, use the group() function.

File name : employeeDetails-editor.component.ts

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

@Component({
  selector: 'app-employeeDetails-editor',
  templateUrl: './employeeDetails-editor.component.html',
  styleUrls: ['./employeeDetails-editor.component.css']
})
export class EmployeeDetailsEditorComponent {
  employeeDetailsForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

  constructor(private fb: FormBuilder) { }
}

To specify the attributes in the model, you used the group() function with the same object in the preceding example. The value for each control name is an array with the initial value as the first item.

If your controls require sync or async validation, add sync and async validators as the second and third elements in the array.