Using Angular FormBuilder to build Forms

Angular FormBuilder API makes it easier to build reactive forms. We can easily add the FormGroup, nested FormGroup’s, FormArray’s & FormControls easily. It also allows us to set up the Validation rules for each of the controls. In this tutorial, we will show you how to create a Form, add validation rules using the FormBuilder.

If you are new to Reactive Forms, we recommend you to learn how to build reactive forms.

What is FormBuilder

The FormBuilder is the helper API to build forms in Angular.  It provides shortcuts to create the instance of the FormControl, FormGroup or FormArray. It reduces the code required to write the complex forms.

How to use FormBuilder

Import & inject FormBuilder API

To use the FormBuilder, first, we need to import it in our component

Next, we need to inject it into our component class

Finally, use the group, array & control methods to build the FormModel

FormGroup

We use the group method to build the Form Group. We pass the list of Form Controls, Form Array, or another Form Group to the group method as key-value pair. Where the key is the name of the FormControl, FormGroup or FormArray. The value is the configuration of the control.

In the following example, we have added six form controls. The First argument to the FormControl is the initial value, which we set to empty string.

Nested FormGroup

Creating a Nested FormGroup is just as easy. use the formbuilder.group method, as shown below.

Validations

The second argument to the FormControl is the list of sync validators. The following example shows how to add validators.

FormBuilder Example

We learned how to build reactive forms the Angular Reactive forms tutorial.

app.component.ts

app.component.html

References

  1. FormBuilder API

Summary

FormBuilder API makes it easier to work with the reactive forms in Angular. We can make use of the group, array & control methods to build ourFormModel. FormBuilder reduces the code required to write the complex forms.

  1. Angular Forms Tutorial: Fundamental & Concepts
  2. Template Driven Forms in Angular
  3. Set Value in Template Driven forms in Angular
  4. Reactive Forms in Angular
  5. FormBuilder in Reactive Forms
  6. SetValue & PatchValue in Angular
  7. StatusChanges in Angular Forms
  8. ValueChanges in Angular Forms
  9. FormControl
  10. FormGroup
  11. FormArray Example
  12. Build Dynamic or Nested Forms using FormArray
  13. Validations in Reactive Forms in Angular
  14. Custom Validator in Reactive Forms
  15. Passing Parameter to Custom Validator in Reactive Forms
  16. Inject Service into Custom Validator
  17. Validation in Template Driven Forms
  18. Custom Validator in Template Driven Forms

7 thoughts on “Using Angular FormBuilder to build Forms”

  1. I understand, FormBuilder and Reactive forms make testing and control over inputs easier, but still the code looks way smaller and efficient while using template driven forms. Also if working with many input fields, Reactive Forms does not follow the “Separation of Concerns” Principle because component is controlling the entire template. Other than Unit Testing and Better control, Is there any more advantage of using Reactive forms over template driven forms ?

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top