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

@Component({
  selector: 'app-checkbox-form',
  templateUrl: './checkbox-form.component.html',
  styleUrls: ['./checkbox-form.component.css']
})
export class CheckboxFormComponent implements OnInit {
  form: FormGroup;
  options = ['Option 1', 'Option 2', 'Option 3'];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      checkboxes: this.fb.array([])
    });

    const checkboxes = this.form.get('checkboxes') as FormArray;
    this.options.forEach(option => {
      const control = this.fb.control(false);
      checkboxes.push(control);
    });
  }

  getCheckboxValues(): string[] {
    const checkboxes = this.form.get('checkboxes') as FormArray;
    return checkboxes.controls
      .map(control => control.value)
      .filter(value => value);
  }
}

<form [formGroup]="form">
  <div formArrayName="checkboxes">
    <div *ngFor="let option of options; let i = index">
      <input type="checkbox" [formControlName]="i">{{ option }}
    </div>
  </div>
</form>