Angular Material Checkbox: add true values in an array

I have a problem with Angular Material and checkboxes. I would like to create an array with all checked checkboxes but seems that is harder than I tought.

dialog-settings.html

<h1 mat-dialog-title>Settings</h1>
<div mat-dialog-content>
  <section [formGroup]="dynamColumns">
    <ul>
      <mat-checkbox color="primary" formControlName="nome">Name</mat-checkbox>
      <mat-checkbox color="primary" formControlName="surname"
        >Surname</mat-checkbox
      >
      <mat-checkbox color="primary" formControlName="date"
        >Date</mat-checkbox
      >
    </ul>
  </section>
</div>
<p>{{ dynamColumns.value | json }}</p>
<div mat-dialog-actions [align]="'end'">
  <button mat-raised-button color="warn" mat-dialog-close>Close</button>
  <button
    style="margin-left: 8px"
    (click)="onSave()"
    mat-raised-button
    color="primary"
  >
    Save
  </button>
</div>

dialog-settings.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
  selector: 'app-dialog-settings',
  templateUrl: './dialog-settings.component.html',
  styleUrls: ['./dialog-settings.component.scss'],
})
export class DialogSettingsComponent implements OnInit {
  columns: any;
  dynamColumns = this._formBuilder.group({
    name: false,
    surname: false,
    date: false,
  });

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    console.log(this.columns);
  }

  onSave() {
    // if checkbox is checked ---> join columns array
  }
}

I have already tried accessing dynamColumns.value but I can't figure out how to filter keys and join into an array if value is true.
This is what I get trying a boolean condition on dynamColumns.value

This comparison appears to be unintentional because the types 'Partial<{ name: boolean | null; surname: boolean | null; date: boolean | null; }>' and 'boolean' have no overlap.

What's the problem?

The problem is that value on FormGroup is an object of all the form controls, so you can't compare it against boolean. You have to work with it as object.

It's mentioned in docs
> For an enabled FormGroup, the values of enabled controls as an object
> with a key-value pair for each member of the group.

Solution

To get the fields that are true you could use Object.entries() with Array.prototype.reduce() function. Since you didn't specify the return type you want.
I will use {key: string, value: boolean} as a return type.

Object.entries() will transform the FormGroup value object to array of key-value pairs.

Output of Object.entries() will look like this

[ ['name', false], ['surname', true], ['date', false] ]

You can then reduce it back to array based on the condition.

This is how your onSave() function could look like.

onSave() {
  const output = Object.entries(this.dynamColumns.value).reduce(
      (acc: {key: string, value: boolean}[], [key, value]) => {
        if (value) {
          acc.push({key, value});
        }
        return acc;
      },
      []
    );
   this._dialogRef.close(output); // <-- In case you want to close the dialog
  }