In my scenario, I have a basic dynamic radio button setup where three options are generated based on retrieved data.
Once a radio button is selected, it updates my reactive form with the corresponding value - either "yes", "no", or "maybe". Along with these values, there are other properties associated with each option that I also want to include in the form submission.
For example, besides returning the section, I also need to return the sectionCode related to the selected section.
Prior to changing the radio selection, all properties are displayed correctly on the form. However, due to only being able to pass back one value at a time, I lose access to the other object items as soon as I make a selection.
You can view the code snippet and work with it on StackBlitz: here
section:[
{
section: "yes",
sectionCode: "1"
},
{
section: "no",
sectionCode: "2"
},
{
section: "maybe",
sectionCode: "3"
}
]
component.html
<div formGroupName="radioButtons" class="form-group col-6 pl-0 pt-3">
<h2 class="mb-2">radioButtons</h2>
<label for="intel-form-submitter" appRequiredLabel>select</label><br />
<div class="form-check-inline" *ngFor="let item of personal.radioButtons.section">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input value="{{item.section}}" id="{{item.section}}" type="radio" formControlName="section"/>
<span class="checkmark"></span>
</label>
</div>
</div>
component.ts
createEntry(formBuilder: FormBuilder) {
return this.formBuilder.group({
title: this.personal.title,
creationDate: this.personal.creationDate,
radioButtons: this.formBuilder.group({
section: this.personal.radioButtons.section,
})
});
}