With the Angular 2's new forms module, we can build complex forms with even more intuitive syntax.

In this article, we will learn about how to build a nested model-driven form with validation using the latest forms module. If you are new to model-driven forms, please refer to How to Build Model-driven Forms in Angular 2 for a basic rundown.

Let's say you have a product with a name and a price in your model. You want to create a form for it that allows a user to add a new product. But what if you want to add multiple products in the same form? How would we loop through each user model and validate it?

Nested forms allow us to handle multiple models in a single form.

Let's dig a little deeper and see how we do it.

Here's what we'll be building:

A form to create a customer

Ability for a customer to add multiple addresses

We're going to split our app up into multiple implementations:

Part 1: Create the customer form

Part 2: Move the group of controls to a new component

Upgrade Your JS Go from vanilla JavaScript 👉 React

Watch for FREE

We will build a form to capture customer information based on this interface:

export interface Customer { name : string ; addresses : Address [ ] ; } export interface Address { street : string ; postcode : string ; }

Requirements

Our app will be able to do the following:

add or remove an address

view error messages of invalid fields

submit the form if all fields are valid

Our end result for the Add Customer form will look like this:

Let's take a look at how our app will be setup. We'll have our app folder which contains our components as well as our index.html file, stylesheet, and tsconfig.json .

|- app/ |- address.component.html |- address.component.ts |- app.component.html |- app.component.ts |- app.module.ts |- main.ts |- customer.interface.ts |- index.html |- styles.css |- tsconfig.json

In order to use new forms module, we need to npm install @angular/forms npm package and import the reactive forms module in application module.

$ npm install @angular/forms --save

Here's the module for our application app.module.ts :

import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { FormsModule , ReactiveFormsModule } from '@angular/forms' ; import { AppComponent } from './app.component' ; @ NgModule ( { imports : [ BrowserModule , ReactiveFormsModule ] , declarations : [ AppComponent ] , bootstrap : [ AppComponent ] } ) export class AppModule { }

Let's move on to create our app component. app.component.ts is our root component and we will write our component code here.

import { Component , OnInit } from '@angular/core' ; import { Validators , FormGroup , FormArray , FormBuilder } from '@angular/forms' ; import { Customer } from './customer.interface' ; @ Component ( { moduleId : module . id , selector : 'app-root' , templateUrl : 'app.component.html' , } ) export class AppComponent implements OnInit { public myForm : FormGroup ; constructor ( private _fb : FormBuilder ) { } ngOnInit ( ) { } save ( model : Customer ) { console . log ( model ) ; } }

This is what our HTML view will look like:

< div class = " container " > < h4 > Add customer </ h4 > < form [formGroup] = " myForm " novalidate (ngSubmit) = " save(myForm) " > < button type = " submit " [disabled] = " !myForm.valid " > Submit </ button > </ form > </ div >

We bind myForm to form group directive. The Submit button will be disabled if the form is not valid. save function will be called when we submit the form.

Now, let's initialize our form model and create the functions that allow us to add and remove an address.

ngOnInit ( ) { this . myForm = this . _fb . group ( { name : [ '' , [ Validators . required , Validators . minLength ( 5 ) ] ] , addresses : this . _fb . array ( [ this . initAddress ( ) , ] ) } ) ; } initAddress ( ) { return this . _fb . group ( { street : [ '' , Validators . required ] , postcode : [ '' ] } ) ; } addAddress ( ) { const control = < FormArray > this . myForm . controls [ 'addresses' ] ; control . push ( this . initAddress ( ) ) ; } removeAddress ( i : number ) { const control = < FormArray > this . myForm . controls [ 'addresses' ] ; control . removeAt ( i ) ; }

We're using the form builder, _fb , to create our form.

There are 3 functions available in the form builder:

group : construct a new form group. E.g. our myForm and address model

: construct a new form group. E.g. our myForm and address model array : construct a new form array. E.g. our customer's list of addresses

: construct a new form array. E.g. our customer's list of addresses control: construct a new form control.

Each form control accepts an array. The first parameter is the default value of the control, the second parameter accepts either a validator or an array of validators, and the third parameter is the async validator. Please refer to Angular official documentation for details.

In our example, we'll assign a list of validators to the name control, and assign a single validator to the street control.

Great! All the neccesary functions are created. Let's now bind our form model to the view.

... < form [formGroup] = " myForm " novalidate (ngSubmit) = " save(myForm) " > < div class = " form-group " > < label > Name </ label > < input type = " text " formControlName = " name " > < small *ngIf = " !myForm.controls.name.valid " class = " text-danger " > Name is required (minimum 5 characters). </ small > </ div > < div formArrayName = " addresses " > < div *ngFor = " let address of myForm.controls.addresses.controls; let i=index " > < div > < span > Address {{i + 1}} </ span > < span *ngIf = " myForm.controls.addresses.controls.length > 1 " (click) = " removeAddress(i) " > </ span > </ div > < div [formGroupName] = " i " > < div > < label > street </ label > < input type = " text " formControlName = " street " > < small [hidden] = " myForm.controls.addresses.controls[i].controls.street.valid " > Street is required </ small > </ div > < div > < label > postcode </ label > < input type = " text " formControlName = " postcode " > </ div > < div > </ div > </ div > < button type = " submit " [disabled] = " !myForm.valid " > Submit </ button > </ form > ...

A few notes here:

formControlName directive: the form control name.

directive: the form control name. formArrayName directive: the array name. In our example, we bind addresses to the formArrayName.

directive: the array name. In our example, we bind addresses to the formArrayName. formGroupName directive: the form group name. Since addresses is an array, Angular assigns the index number as the group name to each of the addresess. Therefore, we'll bind the index i , to formGroupName .

Our form is working fine now. But imagine that you have a huge form which consists of a lot of controls, we might need to consider moving each group of controls to a seperate component to keep our code neat.

Let's move our address implementation to a new component.

import { Component , Input } from '@angular/core' ; import { FormGroup } from '@angular/forms' ; @ Component ( { moduleId : module . id , selector : 'address' , templateUrl : 'address.component.html' } ) export class AddressComponent { @ Input ( 'group' ) public adressForm : FormGroup ; }

Now, copy the address implementation from the app component view to the address view.

< div [formGroup] = " adressForm " > < div class = " form-group col-xs-6 " > < label > street </ label > < input type = " text " class = " form-control " formControlName = " street " > < small [hidden] = " adressForm.controls.street.valid " class = " text-danger " > Street is required </ small > </ div > < div class = " form-group col-xs-6 " > < label > postcode </ label > < input type = " text " class = " form-control " formControlName = " postcode " > </ div > </ div > ...

Import address component to app module

Let's import the address component to our app module.

import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { FormsModule , ReactiveFormsModule } from '@angular/forms' ; import { AppComponent } from './app.component' ; import { AddressComponent } from './address.component' ; @ NgModule ( { imports : [ BrowserModule , ReactiveFormsModule ] , declarations : [ AppComponent , AddressComponent ] , bootstrap : [ AppComponent ] } ) export class AppModule { }

Use address component in app component

We can now replace address with our new address component in app component.

< div [formGroupName] = " i " > < address [group] = " myForm.controls.addresses.controls[i] " > </ address > < div >

Woala! With the new forms module, we can use formArray to create a list of controls. We can seperate each group of controls to a new component and the validation is still working fine.

That's it. Happy coding!

Live demo here:-

part 1, implement add customer form: https://embed.plnkr.co/hQ6RtzCfPosfQl4HlbZQ/

part 2, move group of controls to new component

Like this article? Follow @JecelynYeen on Twitter