After dedicating numerous hours to tackle this issue, I finally came up with a solution for my formGroup setup:
this.frameworkForm = this.formBuilder.group({
id: [null],
name: ['', Validators.required],
active: [true],
parsingRequired: [false],
reviewRequired: [false],
frameworkSortingType: {
id: null,
environmentalSortingType: '',
socialSortingType: '',
governanceSortingType: '',
},
});
While working on my template, I encountered a challenge in extracting value from environmentalSortingType:
<div class="alphabetically">
<label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
<div class="p-field-radiobutton">
<p-radioButton [name]="'environmental'" value="alphabetically"
formControlName="frameworkSortingType.environmentalSortingType"
></p-radioButton>
<p-radioButton [name]="'environmental'" value="numerically"
formControlName="frameworkSortingType.environmentalSortingType"
></p-radioButton>
</div>
I struggled with the use of . in
formControlName="frameworkSortingType.environmentalSortingType"UPDATE
To address the issue, I adjusted my code by introducing a nested formGroup. However, I'm still encountering an error: Cannot find control with unspecified name attribute (
<div class="sorting" formGroupName="frameworkSortingType"> ngOnInit() {
this.frameworkForm = this.formBuilder.group({
id: [null],
name: ['', Validators.required],
active: [true],
parsingRequired: [false],
reviewRequired: [false],
frameworkSortingType: this.formBuilder.group( {
id: null,
environmentalSortingType: '',
socialSortingType: '',
governanceSortingType: '',
}),
});
Here is the updated section of my template:
<div class="sorting" formGroupName="frameworkSortingType">
<div class="alphabetically">
<label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
<div class="p-field-radiobutton">
<p-radioButton [name]="'environmental'" value="alphabetically"
formControlName="environmentalSortingType"
></p-radioButton>
</div>