Angular nested form groups

Let's understand, creating nested form groups with an example.  




In addition to fullName and email, we want to add the following 3 fields to "Create Employee" form. 

• Skill Name
• Experience in Years
• Proficiency

What we want to be able to ultimately do is add multiple skills dynamically at run time, by clicking "Add a new skill" button. 



When the button is clicked, we want to dynamically add another set of skill related fields i.e  

• Skill Name
• Experience in Years and
• Proficiency

Also, another additional requirement is to keep "Add a new skill" button disabled, until all the skill related fields are properly filled and valid. 

So in short, the requirement is to dynamically create a group of form fields and also validate them as a single group so "Add a new skill" button can be enabled or disabled based on the validation state of the group. This can be very easily achieved using a nested form group. So, first let's create a nested form group for skill related fields in the component class. 

Step 1: Creating a nested form group in the component class : Form groups can accept both form control and form group instances as children. This allows us to create a nested form group. Modify the code in ngOnInit() life cycle hook as shown below. 

ngOnInit() {

  this.employeeForm = new FormGroup({

    fullName: new FormControl(),

    email: new FormControl(),

    // Create skills form group

    skills: new FormGroup({

      skillName: new FormControl(),

      experienceInYears: new FormControl(),

      proficiency: new FormControl()

    })

  });

}

Notice we have created a nested form group with key - skills. This nested form group contains 3 form controls. 

• skillName,
• experienceInYears and
• proficiency

Step 2: Grouping the nested form in the template : To group the form elements in the HTML, encapsulate the form elements in a <div> element and use the formGroupName directive on that container <div> element. Bind the formGroupName directive to the skills FormGroup instance in the component class. Bind each input element in the HTML, to the corresponding FormControl instance using the formControlName directive. 

<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>

At this point, save all the changes and when you fill out the form. 



skills nested formgroup value is reflected on the page.  

 

Please note : If you do not see the nested formgroup value displayed, make sure you have the following in the template after the closing <form> element.
Form Values : {{employeeForm.value}} 

In our upcoming sessions we will discuss, form validation and dynamically adding form controls.