checkbox dynamic form return true and false angular 9

1. I have problem in returning the output of checkbox list..where when I select the value and submit, the value will return true or false. May someone help me how to return other than true or false value? Im using Angular. Here i showed my code:

   dynamicformques.component.html

   <div [ngSwitch]="question.controlType">
   
       <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
               [id]="question.key" [type]="question.type">
   
     <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
         <option *ngFor="let opt of question.options" type="dropdown" [value]="opt.key"></option>  
     </select>
   
     <div *ngSwitchCase="'radio'">
   
       <label *ngFor ="let opt of question.options">
         <input type="radio" [name]="question.key" [formControlName]="question.key" [value]="opt.id">
       </label>
     </div>
   
     <div *ngSwitchCase="'checkbox'">
       <label *ngFor ="let opt of question.options">
         <input type="checkbox" [name]="question.key" [formControlName]="question.key" [value]="opt.value">
       </label>
     </div>
   </div>
   
   <div class="errorMessage" *ngIf="!isValid"> is required</div>
   

   and this is my code for question.service.text import { Injectable } from '@angular/core'; import { DropdownQuestion } from './questiondropdown'; import { QuestionBase } from './questionbase'; import { TextboxQuestion } from './questiontextbox'; import { RadiobuttonQuestion } from './questionradiobutton'; import { CheckboxlistQuestion } from './questioncheckboxlist'; import { of } from 'rxjs';

   @Injectable() export class QuestionService {

   getQuestions(){

   let questions: QuestionBase<string>[] = [
   
     new RadiobuttonQuestion({
       key: 'size',
       label: 'Size of the cake:',
       type: 'radio',
       options: [
         {id: 'cakesix', value: 'Round Cake 6" - serves 8 people'},
         {id: 'cakeeight', value: 'Round Cake 8" - serves 12 people'},
         {id: 'caketen', value: 'Round Cake 10" - serves 16 people'},
         {id: 'caketwelve', value: 'Round Cake 12" - serves 30 people'}
       ],
   
       order: 1
   
     }),
   
     new DropdownQuestion({
       key: 'flavour',
       label: 'Select flavour:',
       type:'dropdown',
       options: [
         {key: 'lemon', value: 'Lemon'},
         {key: 'custard', value: 'Custard'},
         {key: 'fudge', value: 'Fudge'},
         {key: 'mocha', value: 'Mocha'},
         {key: 'raspberry', value: 'Raspberry'}
       ],
       order: 2
     }),
   
     new CheckboxlistQuestion({
       key: 'fill',
       label: 'Fillings:',
       type: 'checkbox',
       options: [
         {num: 'lemon', value: 'Lemon'},
         {num: 'custard', value: 'Custard'},
         {num: 'fudge', value: 'Fudge'},
         {num: 'mocha', value: 'Mocha'},
         {num: 'raspberry', value: 'Raspberry'}
   
       ],
       order: 3
   
     }),
   
     new TextboxQuestion({
       key: 'CustomerName',
       label: 'Name:',
       value: 'raihan',
       required: true,
       order: 4
   
     }),
   
     new TextboxQuestion({
       key: 'CustomerAddress',
       label: 'Address:',
       value: 'puchong',
       required: true,
       order: 5
     }),
   
     new TextboxQuestion({
       key: 'CustomerPhone',
       label: 'Phone number:',
       value: '0122122122',
       required: true,
       order: 6
     })
   ];
   
   return of(questions.sort((a,b) => a.order - b.order));
   

   } }

2. I only have problem at the checkbox where it return true or false after i submitted the form. But I wanted the output to be Lemon, Custard, Fudge, Mocha or Raspberry value. Here i show you the output images: