Angular FormGroup vs FormGroupName

Asked on October 17, 2023
What is difference between Angular FormGroup and FormGroupName and how to use them?

Replied on October 17, 2023

FormGroup tracks value and validity state of a group of FormControl instances.

Find FormGroup  that will contain FormControl instances.

empForm = new FormGroup({

‘empForm’  is the FormGroup instance. We connect it with DOM element binding with [formGroup] .

The value and status of  ‘empForm’ is obtained as



FormGroupName syncs a nested FormGroup to a DOM element.
Find a nested FormGroup that will contain FormControl instances.

empForm = new FormGroup({
team: new FormGroup({
teamName: new FormControl()

In ‘empForm’  FormGroup, a nested ‘team’  FormGroup is created. To sync ‘team’  FormGroup with DOM element, use  formGroupName as below.

<form [formGroup]="empForm" (ngSubmit)="onFormSubmit()">
   <div formGroupName="team">
      <input formControlName="teamName">

Fetch value and status of ‘team’  FormGroup as below.


Replied on November 10, 2023
1. FormGroup

FormGroup tracks value and validity state of a group of form controls. It is used to create a form. FormGroup is also used to create nested form group. Nested form group is a group of form controls within a form.

Find the code snippet to create FormGroup.
countryForm = new FormGroup({
   countryName: new FormControl('', [Validators.required]),
   pmName: new FormControl('', [Validators.required])

HTML code will be as below.

<form [formGroup]="countryForm" (ngSubmit)="onFormSubmit()">
    <p>Country Name : <input formControlName="countryName">
    <p>PM Name : <input formControlName="pmName"></p>

Find the code to fetch FormGroup value.

2. FormGroupName
FormGroupName syncs a nested FormGroup to a DOM element.

  selector: 'app-country',
  template: `
    <form [formGroup]="countryform" (ngSubmit)="onFormSubmit()">
      <p>Country Name : <input formControlName="countryName">
      <div formGroupName="pm">
        <input formControlName="pmName">
        <input formControlName="age">
      <button type="submit">Submit</button>
export class CountryComponent {
  countryform = new FormGroup({
      countryName: new FormControl('', [Validators.required]),
    pm: new FormGroup({
        pmName: new FormControl('', [Validators.required]),
        age: new FormControl('', Validators.required)

  get countryName(): any {
    return this.countryform.get('countryName');

  get pm(): any {
    return this.countryform.get('pm');
  get pmName(): any {
    return this.countryform.get('pm.pmName');
  get age(): any {
    return this.countryform.get('pm.age');

  onFormSubmit() {

Write Answer

©2024 | Privacy Policy | Contact Us