Angular 2 Dynamically generated form with multiple checkbox not working - json

Question

I am dynamically generating HTML Form based on a JSON. I am using the official example provided here: https://angular.io/guide/dynamic-form
I am trying to extend this example to have other controls in my dynamic form (textarea, radio button, checkbox, etc.). I have been able to achieve all controls, except for checkbox. Though the checkbox is visible on the screen, the value is not captured in its enclosing form.
My Checkbox definition goes like this:
import { QuestionBase } from './question-base-model';
export interface Values{
label: string;
value: string;
isChecked: boolean;
}
export class CheckBoxQuestion extends QuestionBase<boolean> {
controlType = 'checkbox';
options: Values[] = [];
constructor(options: {} = {}) {
super(options);
this.options = options['options'] || [];
}
}
My JSON for checkbox is like this:
{
key: 'sideDish',
label: 'Side dish',
type: 'checkbox',
order: 10,
name: 'sides',
options: [
{value: 'fries', isChecked: true, label: 'French Fries'},
{value: 'cheese', isChecked: false, label: 'Cheese'},
{value: 'sauce', isChecked: true, label: 'Tomato Sauce'}
]
}
And my Dynamic HTML template is as below:
<div [formGroup]="form" >
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<!-- Checkbox -->
<div *ngSwitchCase="'checkbox'">
<span *ngFor="let opt of question.options; let i = index">
<input type="checkbox"
[formControlName]="question.key"
[id]="i+'_'+question.key"
[value]="opt.value">
<label [attr.for]="i+'_'+question.key">{{opt.label}}</label>
</span>
</div>
</div>
The FormControl code goes like this (no edits made here from the original example):
toFormGroup(questions: QuestionBase<any>[] ) {
let group: any = {};
questions.forEach(question => {
let validatorsArray = [];
if(question.required) validatorsArray.push(Validators.required);
group[question.key] = validatorsArray.length > 0 ? new FormControl(question.value || '', Validators.compose(validatorsArray)) : new FormControl(question.value || '');
});
return new FormGroup(group);
This method is consumed in the init function:
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
}
When I hit on Submit button, I am printing the "form.value". Rest all the controls prints with the value I have set in the form. But, an empty string as value for this checkbox. What am I doing wrong?
Thanks in advance!