The recommended approach involves leveraging the power of reactive forms to handle grouped checkboxes efficiently. By utilizing a FormGroup in Angular, you can easily create validators to ensure at least one checkbox is selected within a specific group.

To implement this functionality, simply nest another FormGroup inside your existing one and attach a validator:

form = new FormGroup({
    // ...more form controls...
    myCheckboxGroup: new FormGroup({
      myCheckbox1: new FormControl(false),
      myCheckbox2: new FormControl(false),
      myCheckbox3: new FormControl(false),
    }, requireCheckboxesToBeCheckedValidator()),
    // ...more form controls...
  });

You can customize the validator to check for a specific number of checkboxes by passing an argument, such as

requireCheckboxesToBeCheckedValidator(2)

import { FormGroup, ValidatorFn } from '@angular/forms';

export function requireCheckboxesToBeCheckedValidator(minRequired = 1): ValidatorFn {
  return function validate (formGroup: FormGroup) {
    let checked = 0;

    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key];

      if (control.value === true) {
        checked ++;
      }
    });

    if (checked < minRequired) {
      return {
        requireCheckboxesToBeChecked: true,
      };
    }

    return null;
  };
}

In your HTML template, remember to include the 'formGroupName' directive to encapsulate your checkboxes within the group. The compiler will notify you of any errors if it's not set up correctly:

<ng-container [formGroup]="form">
   <!-- ...more form controls... -->

   <div class="form-group" formGroupName="myCheckboxGroup">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" formControlName="myCheckbox1" id="myCheckbox1">
        <label class="custom-control-label" for="myCheckbox1">Option 1</label>
      </div>

      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" formControlName="myCheckbox2" id="myCheckbox2">
        <label class="custom-control-label" for="myCheckbox2">Option 2</label>
      </div>

      <div class="invalid-feedback" *ngIf="form.controls['myCheckboxGroup'].errors && form.controls['myCheckboxGroup'].errors.requireCheckboxesToBeChecked">Please select at least one option.</div>
    </div>

    <!-- ...more form controls... -->
  </ng-container>

*For a more dynamic implementation, consider storing form data in an array and generating the template using ngFor.

Avoid misusing hidden FormControl attributes like in some examples. A FormControl is designed for input values only, while additional metadata should be managed separately for clarity and maintainability. View a live demo here: https://stackblitz.com/edit/angular-at-least-one-checkbox-checked

I encountered a similar issue and came up with this solution when working with Angular 6 FormGroup, particularly with handling multiple checkboxes.

Customized HTML: Please note that the styling is done using Angular Material, feel free to adjust it as necessary.

<form [formGroup]="form">
  <mat-checkbox formControlName="checkbox1">First Checkbox</mat-checkbox>
  <mat-checkbox formControlName="checkbox2">Second Checkbox</mat-checkbox>
  <mat-checkbox formControlName="checkbox3">Third Checkbox</mat-checkbox>
</form>

TypeScript Implementation:

form: FormGroup;

constructor(private formBuilder: FormBuilder){}

ngOnInit(){

  this.form = this.formBuilder.group({
    checkbox1: [''],
    checkbox2: [''],
    checkbox3: [''],
  });

  this.form.setErrors({required: true});
  this.form.valueChanges.subscribe((newValue) => {
    if (newValue.checkbox1 === true || newValue.checkbox2 === true || newValue.checkbox3 === true) {
      this.form.setErrors(null);
    } else {
      this.form.setErrors({required: true});
    }
  });
}

In essence, listen for any changes in the form and update the errors based on the new form values accordingly.

When performing validation, such as triggering a click event, go through your array and verify if there is at least one item that is true.

let isChecked: any = this.officeLIST.filter((element) => element.checked === true);
if(isChecked != null && isChecked.length > 0) {
 //At least one item is checked
}else {
 alert("Please select at least one item");
}

Make sure to include (ngModelChange)="onChange(officeLIST)" in your checkbox and add the following code snippet to your .ts file.

onChange(items) {
    var selected = items.find(function (x) { return x.checked === true; });
    if (selected)
      this.isSelected = true;
    else
      this.isSelected = false;
  }

You can utilize the isSelected variable wherever needed.

I have successfully implemented a solution similar to the one proposed by Mick, using FormGroup and a custom Validator. However, for those who do not require handling errors for quantities checked greater than zero, the Validator can be simplified as follows:

function checkGroupValidator(): ValidatorFn {
  return (groupForm: FormGroup) => {
    const selectedKeys = Object.keys(groupForm.controls).filter((key) => groupForm.controls[key].value);

    if (selectedKeys.length === 0) { return { checkboxesRequired: true }; }

    return null;
  };
}