Angular Reactive FormArray

<!DOCTYPE html>

<html>
  <head>
    <script src="./lib/main.ts"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

//our root app component
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <ng-container>
      <form [formGroup]="form" (ngSubmit)="doSubmit()" novalidate>
        <div *ngFor="let data of weekDays; let i = index" class="form-item">          
          <input type="checkbox" [id]="data.id" [value]="data.value"
            (change)="onCheckboxChange($event)" [checked]="data.checked" />
          <label [for]="data.id">{{ data.name }}</label>
        </div>
        <div>
          <label for="startDate">Start Date:&nbsp;</label>
          <input type="date" id="startDate" formControlName="startDate" />
        </div>
      </form>

      <p *ngIf="display" class="display">
        {{ display }}
      </p>
    </ng-container>
  `,
})
export class App {
  form: FormGroup;
  display: string = null;

  weekDays: Array<any> = [
    { name: 'Sunday (1)', value: 1, id: 'sunday', checked: false },
    { name: 'Monday (2)', value: 2, id: 'monday', checked: false },
    { name: 'Tuesday (3)', value: 3, id: 'tuesday', checked: false },
    { name: 'Wednesday (4)', value: 4, id: 'wednesday', checked: false },
    { name: 'Thursday (5)', value: 5, id: 'thursday', checked: false },
    { name: 'Friday (6)', value: 6, id: 'friday', checked: false },
    { name: 'Saturday (7)', value: 7, id: 'saturday', checked: false }
  ];

  constructor(private builder: FormBuilder) {
    this.form = this.builder.group({
      checkboxes: this.builder.array([]),
      startDate: ['2021-08-01']
    });
  }

  // NOT USING, but an example of an incoming edit
  fillCheckboxes() {
    let vals = [7,3,1];
    const checkArray: FormArray = this.form.get('checkboxes') as FormArray;

    this.weekDays.forEach(day => {
      vals.forEach(val => {
        if (val === parseInt(day.value, 10)) {
          day.checked = true;
          checkArray.push(new FormControl(parseInt(day.value, 10)));
        }
      });
    });

    this.display = String(this.form.get('checkboxes').value);
  }

  onCheckboxChange(e) {
    const checkArray: FormArray = this.form.get('checkboxes') as FormArray;

    if (e.target.checked) {
      checkArray.push(new FormControl(parseInt(e.target.value, 10)));
    } else {
      let i = 0;
      checkArray.controls.forEach((item: FormControl) => {
        if (item.value == parseInt(e.target.value, 10)) {
          checkArray.removeAt(i);
          return;
        }
        i++;
      });
    }

    this.display = String(this.form.get('checkboxes').value);
  }
}

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

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
}

.form-item {
  display: flex;
  margin-bottom: 5px;;
}

.form-item label {
  flex-basis: 15%;
  flex: auto;
  font-size: 0.8rem;
  cursor: pointer;
  top: -3px;
  position: relative;
  margin-left: 5px;
}

input[type=submit], input[type=button] {
  font-size: 0.8rem;
  margin-right: 5px;
}

p.display {
  margin-top: 10px;
}

{
  "name": "@plnkr/starter-angular",
  "version": "1.0.3",
  "description": "Angular starter template",
  "dependencies": {
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "core-js": "2.6.11",
    "rxjs": "6.5.4",
    "zone.js": "0.10.2"
  },
  "main": "./lib/main.ts",
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}