Angular FormGroup vs FormBuilder
Asked on November 03, 2023
What is difference between FormGroup and FormBuilder in Angular application?
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.
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() .
2. control() creates FormControl
3. array() creates FormArray
Find the example.
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>
Replied on November 07, 2023
Thanks.
