Angular checkbox list radio list ngFor with reactive form

<form [formGroup]="checkBoxForm">
  <div *ngFor="let item of checkBoxValueList">
    <input type="checkbox" [formControlName]="item">{{item}}
  </div>
</form>

<pre>
  {{checkBoxForm.value | json}}
</pre>

<form [formGroup]="reactiveForm">
  <div *ngFor="let item of checkBoxValueList">
    <input type="radio" formControlName="yourChoice" [value]="item">
    {{item}}
  </div>
 </form>

<pre>
 {{reactiveForm.value | json}}
</pre>

import { Component, } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  checkBoxForm: FormGroup;
  checkBoxValueList = [
    'Reading',
    'Watching',
    'Traveling',
    'Cooking'
  ];
  reactiveForm: FormGroup = new FormGroup({
    yourChoice: new FormControl()
  });

  constructor(public fb: FormBuilder) {
    const FormControlObject = {};
    this.checkBoxValueList.forEach(res => {
      FormControlObject[res] =
        new FormControl(false)
    });
    this.checkBoxForm = this.fb.group(FormControlObject);
  }
}