Group of checkboxes in an angular reactive form

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <form [formGroup]="testForm" (ngSubmit)="onSubmitForm()">

    <div class="form-group" [formGroup]="testForm.controls.availableDaysForm">

      <label for="firstName">Prénom</label>


      <input type="checkbox" class="form-control" formControlName="lundi">
      <input type="checkbox" class="form-control" formControlName="mardi">


    </div>

    <button type="submit" class="btn btn-primary">Soumettre</button>

  </form>
</div>

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
  testForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this.initForm();
  }

  initForm() {
    this.testForm = this.fb.group({
      availableDaysForm: this.fb.group({
        lundi: false,
        mardi: false
      })
    });
  }

  onSubmitForm() {
    console.log(this.testForm.value);
  }
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}