How to Build Nested forms using Reactive form in Angular 6

Introduction

In this article, you will learn how to create Angular nested form groups in a reactive form into the Angular 6 Application. Before proceeding further, I would recommend that you will understand. how to create an angular application and configure the route URLs.

Let’s understand, creating nested form group in reactive form example

we have following these fields.

1.Full name
2.Email
3.Skill name
4.Experience in years
5.Proficiency

This creates an employee form. so, every time this the button is a click. we want to add another set of these three skill-related fields from a validation. Another additional requirement is to keep this adds a new skill button disabled until all of these three skill-related fields are properly filled and valid.

So, the requirement is to dynamically create a group of form fields and also, validate them as a single group.

add a new skill button can be enabled or disabled based on the validation state of that form group this can be very easily achieved using a nested form group

Create nested form group in component class

ngOnInit() {
  this.employeeForm = new FormGroup({
    fullName: new FormControl(),
    email: new FormControl(),
    // Create form group for skills
    skills: new FormGroup({
      skillName: new FormControl(),
      experienceInYears: new FormControl(),
      proficiency: new FormControl()
    })
  });
}

first, we are creating a route form group and within the route form group we have a form control for the full name and another form control for email and then here, we are creating a nested form group using the same form group class and the key for this nested form group is skills. so within the form group. create-employee.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
 
  employeeForm: FormGroup;

  constructor() { }
 
  ngOnInit() {
  this.employeeForm = new FormGroup({
    fullName: new FormControl(),
    email: new FormControl(),
   
    skills: new FormGroup({
      skillName: new FormControl(),
      experienceInYears: new FormControl(),
      proficiency: new FormControl()
    })
    });
  }
  
  onSubmit(): void {
  console.log(this.employeeForm.touched);
  console.log(this.employeeForm.value);
  console.log(this.employeeForm.controls.fullName.touched);
  console.log(this.employeeForm.get('fullName').value);
  } 
}

form controls for the skill related fields

1.Skill name
2.Experience in years
3.Proficiency

It is easy to create a nested form group in the component class. within our create employee component we already have a route form group and within that, we have form controls for the full name and email.

Now, the key for nested form group is skills and to create the nested form group. we use the form group class constructor to pass an object and then specify the three form controls that are going to be part of the form group. the key for the first form control is skill name.

Create view template

Let’s create the view template and we need to create the three HTML input fields.

<div formGroupName="skills">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="skillName">
      Skill
    </label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="skillName"
          placeholder="Name" formControlName="skillName">
    </div>
    <div class="col-sm-4">
      <input type="text" placeholder="Experience in Years"
          class="form-control" formControlName="experienceInYears">
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 control-label">Proficiency</label>
    <div class="col-md-8">
      <label class="radio-inline">
        <input id="proficiency" type="radio" value="beginner"
               formControlName="proficiency">Beginner
      </label>
      <label class="radio-inline">
        <input id="proficiency" type="radio" value="intermediate"
               formControlName="proficiency">Intermediate
      </label>
      <label class="radio-inline">
        <input id="proficiency" type="radio" value="advanced"
               formControlName="proficiency">Advanced
      </label>
    </div>
  </div>
</div>

First, we have a text box for skill name and another text box for experience in years and then we have three radio buttons for proficiency

1.Beginner
2.Intermediate
3.Advanced

We need to group all these HTML elements. so, we place them in a div element, and then we need to bind to the form group. that we have created in the component class for that we are making use of the form group named directive.

In our component class in this case skill name, similarly, we bind experience in years and finally proficiency radio buttons for radio buttons.

here, we use form control name directive on all the three radio buttons and the value, in this case, is the name of that same form control an instance which is proficiency

Let’s save all these changes and output.

FormControl(fullName)
dirty : true
valid : true
Full Name value : Monk