Angular form builder vs form control and form group

Question

Is there any advantage of using form control and form group over form builder?

I have seen here that:

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.

And I was wondering if there is any advantage of not using form-builder. I am asking this because I was going through some angular code and I saw form control and form group being used and I wondered why one would do that if there is a shorter way to do the same?

So is there any advantage of one over the other way of doing it or is it just preference?

Its almost the same, only form builder will have less symbols in terms of code :) — Vova Bilyachat, May 07 '19 at 04:50
well, take account that using form control alow us indicate {updateOn:'blur'}, Before Angular 7 you only can use formBuilder. For me it's more "natural" the use of form control, and don't need inject formBuilder, but, as you say it is just preference — Eliseo, May 07 '19 at 06:50

score 36 · Accepted Answer · edited Nov 04 '20 at 16:17

I have gone through the Angular Official Docs and on the Reactive Forms Part I have seen that:

The FormBuilder service is an injectable provider that is provided with the reactive forms module.

If you read more you see that the form builder is a service that does the same things as form-group, form-control and form-array. The official docs describe it as:

Creating form control instances manually can become repetitive when dealing with multiple forms. The FormBuilder service provides convenient methods for generating controls.

So basically saying that FormBuilder is a service that is trying to help us reduce boiler-plate code. An example of how FormBuilder is used to reduce boilerplate code can be seen here. To answer the question:

So is there any advantage of one over the other way of doing it or is it just preference?

Well, there is no technical advantage and whichever code you use all boils down to your preference.

One disadvantage is when you don;t really have dynamic form fields and you use `formControlName="myField"` or `formGroup.controls.myFeild` inside a template is not going to allow IDEs to detect any issues up front vs having the form controls on the component and using `[formControl]="myFieldCtrl"` . — bhantol, Oct 16 '19 at 20:13

score 19 · Answer 2 · edited Mar 27 '21 at 04:02

This example is here

With FormGroup:

constructor(private fb: FormBuilder) { }
profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

With FormBuilder:

export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

Vova Bilyachat · Answer 3 · 2020-05-11T13:46:09.490

7

Its almost the same. I always try to use form builder because its more flexible specially when we are talking about dynamic form creation. If you have dynamic form creation you just path it an object and it will return you FormGroup.

edited May 11 '20 at 13:46

answered May 07 '19 at 04:53

Vova Bilyachat

15,962
4
48
72

1

What do you mean by "smaller"? – Chrillewoodz May 11 '20 at 13:41
2

@Chrillewoodz Was long time ago, but I think I mean that syntax of form builder is smaller for instance this.fb.group({firstName: ['']}); vs new FormGroup({ firstName: new FormControl('')), but now I am not sure :) So will edit my response :) – Vova Bilyachat May 11 '20 at 13:45

rohit.khurmi095 · Answer 4 · 2021-02-07T03:27:27.823

Using FormBuilder over FormGroup helps to improve application performance.

FormGroup new = new object created - has to be deleted manually (NOT GOOD FOR APPLICATION MEMORY PERFORMANCE)

 this.form1 = new FormGroup({})

FormBuilder(helper class)

creating FormBuilder object (Removing 'new' keyword)
it needs to be injected in constructor

constructor(private _fb:FormBuilder) { }

 this.form1 = this._fb.group({})

Angular form builder vs form control and form group

4 Answers4