---
title: Bitovi Academy - Reactive Forms Data Binding
description: Learn how to create a Reactive Form with Angular. We will create a Reactive Form in the Restaurant component with city and state dropdown inputs.
---
- 
[AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us)
- 
[Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us)
- 
[Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us)
- 
[Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us)
- 
[Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us)
- [View more
→
](https://www.bitovi.com/digital-consulting-services?hsLang=en-us)
We're Experts in...
- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us)
- [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us)
- [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us)
Showcase
[View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us)
More Projects
- [](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us)
- [](https://design.bitovi.com/christies)
- [](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us)
- [View more
→
](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us)
Open Source Tools
We build powerful tools and open source them to support the community.
[See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us)
- [
BlogWe post about perfecting software delivery
](https://bitovi.com/blog)
- [
PartnershipsLearn about Bitovi's technology partners
](https://www.bitovi.com/partnerships?hsLang=en-us)
- [
AcademyFree courses to build delivery skills
](https://www.bitovi.com/academy/?hsLang=en-us)
- [
Open source toolsUse our tools or contribute to our open source mission.
](https://www.bitovi.com/open-source?hsLang=en-us)
Let's Connect
- [
Discord
](https://discord.gg/J7ejFsZnJ4)
- [
LinkedIn
](https://www.linkedin.com/company/bitovi/)
- [
GitHub
](https://github.com/bitovi/)
Name *
Work Email *
Phone
What's your project?
Send
### Contact Us
(312) 620-0386contact@bitovi.com
- [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us)
- [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us)
- [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us)
- [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us)
- [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us)
- [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us)
- [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us)
- [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us)
- [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us)
- [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us)
- [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us)
- [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us)
- [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us)
- [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us)
- [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us)
- [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us)
- [ Why Angular? ](https://www.bitovi.com/academy/learn-angular/why-angular.html?hsLang=en-us)
- [ Generate an App ](https://www.bitovi.com/academy/learn-angular/building-our-first-app.html?hsLang=en-us)
- [ Creating Components ](https://www.bitovi.com/academy/learn-angular/creating-components.html?hsLang=en-us)
- [ Creating Pipes ](https://www.bitovi.com/academy/learn-angular/creating-pipes.html?hsLang=en-us)
- [ Adding Routing ](https://www.bitovi.com/academy/learn-angular/adding-routing.html?hsLang=en-us)
- [ Creating Navigation ](https://www.bitovi.com/academy/learn-angular/creating-navigation.html?hsLang=en-us)
- [ Fetching Data with Services ](https://www.bitovi.com/academy/learn-angular/restaurant-service.html?hsLang=en-us)
- [ Rendering Data in Components ](https://www.bitovi.com/academy/learn-angular/pull-restaurant-data-into-view.html?hsLang=en-us)
- [ Reactive Forms Data Binding ](https://www.bitovi.com/academy/learn-angular/state-city-options.html?hsLang=en-us)
- [ Listening to Form Changes ](https://www.bitovi.com/academy/learn-angular/form-value-changes.html?hsLang=en-us)
- [ Multi-parameter Services ](https://www.bitovi.com/academy/learn-angular/updating-service-params.html?hsLang=en-us)
- [ Optional: Declarative State ](https://www.bitovi.com/academy/learn-angular/declarative-state.html?hsLang=en-us)
- [ Writing Unit Tests ](https://www.bitovi.com/academy/learn-angular/writing-unit-tests.html?hsLang=en-us)
- [ Creating Nested Routes ](https://www.bitovi.com/academy/learn-angular/nested-routes.html?hsLang=en-us)
- [ Binding Component Data ](https://www.bitovi.com/academy/learn-angular/building-order-form.html?hsLang=en-us)
- [ Creating Directives ](https://www.bitovi.com/academy/learn-angular/creating-directive.html?hsLang=en-us)
- [ Order Service ](https://www.bitovi.com/academy/learn-angular/order-service.html?hsLang=en-us)
- [ Order History Component ](https://www.bitovi.com/academy/learn-angular/order-history-component.html?hsLang=en-us)
- [ Item Total Pipe ](https://www.bitovi.com/academy/learn-angular/item-total-pipe.html?hsLang=en-us)
- [ Real Time Connections ](https://www.bitovi.com/academy/learn-angular/real-time-connection.html?hsLang=en-us)
- [ Deploy App ](https://www.bitovi.com/academy/learn-angular/deploy-app.html?hsLang=en-us)
- [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us)
[View More Courses](https://www.bitovi.com/academy/#courses) [ ]
# Reactive Forms Data Binding `page`
Learn how to create a Reactive Form with Angular. We will create a Reactive Form in the Restaurant component with city and state dropdown inputs.
## Overview
In this part, we will:
- Learn About Reactive Forms
- Import `ReactiveFormsModule` into our root app
- Create a reactive form in our Restaurant Component
- Create a form in our markup and connect inputs to reactive form
## Problem
Currently, we are showing a list of all restaurants:
We would like our user to be able to filter restaurants based on city and state. To accomplish this, we will need to implement a reactive form with two controls, `state` and `city`, that are dropdowns displaying a list of cities and states. It will look like the following:
## What you need to know
To solve this, you will need to know:
- How to create a `FormControl`
- How to use `formControl` directive in the DOM
- How to create a `FormGroup`
- How to use `FormBuilder`
- How to use `ngFor` (you learned this in the Creating Components section! ✔️)
## Reactive Forms
We’re eventually going to use select boxes to handle our user’s input. Angular’s [Reactive Forms](https://angular.io/guide/reactive-forms) API provides a clean way to get data from user input and do work based on it.
From the Angular documentation:
> Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.
## ReactiveFormsModule
To use reactive forms we must import our ReactiveFormsModule into the root app.
```
```
## FormControl
The basic element of a reactive form is the [FormControl](https://angular.io/api/forms/FormControl). This class manages the form input model and connection to its input element in the DOM and inherits from the [AbstractControl](https://angular.io/api/forms/AbstractControl) class. It’s worth getting familiar with the methods available in this class (like setValidators and setValue), as they’re used quite often in reactive form development. The formControl is bound to its element in the DOM using the `[formControl]` directive.
```
```
## FormGroup
A [FormGroup](https://angular.io/api/forms/FormGroup) is a way of grouping `FormControl`s and tracking the state of the entire group. For instance, if you want to get the values of all of your `FormControl`s to submit as an object of those values, you’d use `formGroupName.value`. Notice the way we connect our input in the markup is slightly different - we can use the `formControlName` directive to bind to the name value of a `FormControl` in our `FormGroup`. Groups can be nested within other groups or arrays.
```
```
## FormArray
A [FormArray](https://angular.io/api/forms/FormArray) aggregates `FormControl`s into an array. It’s different than FormGroup in that the controls inside are serialized as an array. `FormArray`s are very useful when dealing with repeated `FormControl`s or dynamic forms that allow users to create additional inputs. Arrays can be nested in groups or other arrays.
This example shows the use of `FormArray` and using an `insert` method to dynamically add more `FormGroup`s to the `users` FormArray.
```
```
## FormBuilder
[FormBuilder](https://angular.io/api/forms/FormBuilder) is a shorthand way to quickly write forms by reducing boilerplate code of manually having to write `new FormControl`, `new FormGroup`, `new FormArray` repeatedly.
```
```
## Form Nullability
Since Angular v14, Angular Forms are strictly typed by default.
By default, all controls include the type `null`. The reason for the `null` type is that when calling `reset` on the form or its controls, the values are updated to `null`.
To avoid the default behavior and having to handle possible `null` values, we can use the `NonNullableFormBuilder`, either via injecting it or accessing the FormBuilder’s `nonNullable` property.
Using `NonNullableFormBuilder` will make `reset` method use the control’s initial value instead of `null`.
```
export class UserComponent {
constructor(private fb: NonNullableFormBuilder) {
this.userForm = fb.group({
email: { value: '', disabled: false },
firstName: { value: '', disabled: false },
lastName: { value: '', disabled: false },
});
}
}
```
The syntax above is equivalent to the code below:
```
export class UserComponent {
constructor(private fb: FormBuilder) {
this.userForm = fb.nonNullable.group({
email: { value: '', disabled: false },
firstName: { value: '', disabled: false },
lastName: { value: '', disabled: false },
});
}
}
```
## Technical requirements
Create a reactive form with two formControls, `state` and `city`, and use the `formControlName` directive to bind the formControls to their select elements in the template.
## Setup
Here’s some code to get you started. Notice that:
- The `cities` and `states` are hard coded (for this exercise).
- A `FormBuilder` instance is injected as the `fb` property.
- The `createForm` method is empty. Use it to initialize the form control.
✏️ Update **src/app/restaurant/restaurant.component.ts** to:
```
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Restaurant } from './restaurant';
import { ResponseData, RestaurantService } from './restaurant.service';
export interface Data {
value: Restaurant[];
isPending: boolean;
}
@Component({
selector: 'pmo-restaurant',
templateUrl: './restaurant.component.html',
styleUrl: './restaurant.component.css',
})
export class RestaurantComponent implements OnInit {
form: FormGroup<{
state: FormControl;
city: FormControl;
}> = this.createForm();
restaurants: Data = {
value: [],
isPending: false,
};
states = {
isPending: false,
value: [
{ name: 'Illinois', short: 'IL' },
{ name: 'Wisconsin', short: 'WI' },
],
};
cities = {
isPending: false,
value: [{ name: 'Springfield' }, { name: 'Madison' }],
};
constructor(
private restaurantService: RestaurantService,
private fb: FormBuilder
) {}
ngOnInit(): void {
this.restaurants.isPending = true;
this.restaurantService.getRestaurants().subscribe((res: ResponseData) => {
this.restaurants.value = res.data;
this.restaurants.isPending = false;
});
}
createForm(): FormGroup<{
state: FormControl;
city: FormControl;
}> {
}
}
```
Make sure to use the `formControl` directive to tie the `select` elements to their `FormControl`s in the component.
✏️ Update **src/app/restaurant/restaurant.component.html** to include some boilerplate for the state and city `