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);
}
}
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);
}
}
