Angular FormGroup vs FormBuilder

Angular

Somya

Asked on November 03, 2023

What is difference between FormGroup and FormBuilder in Angular application?

Mohit

Replied on November 07, 2023

A. FormGroup

FormGroup tracks value and validity state of a group of FormControl instances. It is used to create HTML form. Each element of the form will bind to a FormControl. We can also use to combine some elements within the form as nested FormGroup.

Find the steps to bind FormGroup with a HTML form.

1. Create an instance of FormGroup containing some FormControl.

teamForm = new FormGroup({

name: new FormControl('', [Validators.required]),

   managerName: new FormControl()
});

Each FormControl represents a HTML form element.

<form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
    <p>Team Name : <input formControlName="name">
    <p>Manager Name : <input formControlName="managerName"></p>

</form>

B. FormBuilder

The FormBuilder shortens creating instances of a FormControl, FormGroup, or FormArray. The methods of FormBuilder are group(), control() and array() .

1. group() creates FormGroup
2. control() creates FormControl

3. array() creates FormArray

Find the example.

constructor(private formBuilder: FormBuilder) { }
teamForm = this.formBuilder.group({
   name: ['', Validators.required ],
   managerName: '',
});

HTML code will be same.

<form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
    <p>Team Name : <input formControlName="name">
    <p>Manager Name : <input formControlName="managerName"></p>
</form>

Somya

Replied on November 07, 2023

Thanks.