I am facing an issue with reactive forms and a radio button array in my project. The problem is that I can only select one package at a time instead of multiple packages. Can anyone guide me on how to enable the selection of multiple packages? You can view my demo on Stackblitz. Here's what my Form layout looks like:
https://i.sstatic.net/FiU2v.png
And here is an example of my code:
HTML<div class="card col-8 shadow-sm">
<div class="list-group">
<form name="form" [formGroup]="form" (ngSubmit)="form.valid && onSubmit()">
<div class="list-group-item flex-column align-items-start" *ngFor="let list of packages ; let i=index">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<span class="d-flex align-items-center">
<h5 class="card-title pr-3 d-inline-block font-weight-bold">{{list.eventName}}</h5>
</span>
</div>
<p class="card-text">
{{list.eventNote}}
</p>
<div>
<span class="font-weight-bold pr-2">Attendings :</span>
<span class="ml-5">
<mat-radio-group formControlName="attendings" aria-label="Select an option">
<mat-radio-button value="y">Yes</mat-radio-button>
<mat-radio-button value="n">No</mat-radio-button>
</mat-radio-group>
</span>
</div>
<div class="w-60 mt-4">
<div class="card card-line col-md-12 mb-3" *ngFor="let fee of list.feeList">
<div class="card-body ctrl-height">
<input type="radio" formControlName="fee" id="{{fee.feeId}}" [value]="fee">
<label for="{{fee.feeId}}">
<span class="id-conf">{{fee.category}}</span>
<span class="price">{{fee.price}}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer no-gutters ctrl-lr">
<div class="card-body float-right">
{{form.value | json}}
<a (click)="submit()" class="btn btn-primary card-link d-inline pl-4 pr-4">Next </a>
</div>
</div>
</div>
Component
packages = packages;
form = new FormGroup({
attendings: new FormControl,
fee: new FormControl
});
submit() {
console.log(this.form.value)
}