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

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

console.log(empForm.value);
console.log(empForm.status);

FormGroupName

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">
   </div>
</form>

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

console.log(empForm.get(‘team’).value);
console.log(empForm.get(‘team’).status);

https://angular.io/api/forms/FormGroup
https://angular.io/api/forms/FormGroupName



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

Find the code to fetch FormGroup value.
console.log(countryForm.value);


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


@Component({
  selector: 'app-country',
  template: `
    <form [formGroup]="countryform" (ngSubmit)="onFormSubmit()">
      <p>Country Name : <input formControlName="countryName">
      <div formGroupName="pm">
        <input formControlName="pmName">
        <input formControlName="age">
      </div>
      <button type="submit">Submit</button>
    </form>
`,
})
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() {
    console.log(this.countryName.value);
    console.log(this.pm.value);
    console.log(this.pmName.value);
    console.log(this.age.value);
  }


Write Answer









©2024 concretepage.com | Privacy Policy | Contact Us