custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form

<form [formGroup]="checkboxesGroup" (ngSubmit)="submit(checkboxesGroup)">
  <label>איזו חיית מחמד יש לך?</label>
 <div class="form-group">
 <div class="input-group">
   <input type="checkbox" formControlName="iHaveADog" name="Dog" /> 
   <label>כלב</label>
 </div>
 <div class="input-group">
   <input type="checkbox" formControlName="iHaveACat" name="Cat" /> 
   <label>חתול</label>
</div>
<div class="input-group">
  <input type="checkbox" formControlName="iHaveAFish" name="Fish" /> 
  <label>דג</label>
</div>
<div class="input-group">
  <input type="checkbox" formControlName="iHaveAOther" name="iHaveAOther" />
  <label>אחר</label>
</div>
 </div>
 <button type="submit" [disabled]="!checkboxesGroup.valid">שלח טופס</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidators } from '../validators/at-least-one-checkbox';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  
  public title = 'reactive-form';

  private exampleForm: FormGroup;
  public checkboxesGroup: any;
  
  constructor(private fb: FormBuilder){
    
    this.exampleForm = this.fb.group({
      checkBoxes : this.fb.group({
        iHaveADog : this.fb.control(false),
        iHaveACat : this.fb.control(false),
        iHaveAFish : this.fb.control(false),
        iHaveAOther : this.fb.control(false)
      })
    });
    
    this.checkboxesGroup = this.exampleForm.get('checkBoxes');
  } 
  
  ngOnInit() :void {}

  submit(form: FormGroup) :void{
    if(form.valid) {
      console.log(form.value)
    }
  }
}

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

export class CustomValidators {
    
    static atListOneCheckbox(group: FormGroup) : {[key: string]:any} | null {
     
        const validCheckOne : AbstractControl = group.get('iHaveADog');
        const validCheckTwo : AbstractControl = group.get('iHaveACat');
        const validCheckThree : AbstractControl = group.get('iHaveAFish');
        const validCheckFour : AbstractControl = group.get('iHaveAOther');

        if (validCheckOne.value || validCheckTwo.value || validCheckThree.value || validCheckFour.value) {
            return null;
        }else {
            return {'invalid': true}
        }
    }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidators } from '../validators/at-least-one-checkbox';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  
  public title = 'reactive-form';

  private exampleForm: FormGroup;
  public checkboxesGroup: any;
  
  constructor(private fb: FormBuilder){
    
    this.exampleForm = this.fb.group({
      checkBoxes : this.fb.group({
        iHaveADog : this.fb.control(false),
        iHaveACat : this.fb.control(false),
        iHaveAFish : this.fb.control(false),
        iHaveAOther : this.fb.control(false)
      })
    });
    
    this.checkboxesGroup = this.exampleForm.get('checkBoxes');
    //  ****** הוספנו את זה *******
    this.checkboxesGroup.setValidators(CustomValidators.atListOneCheckbox);
    // *****
  } 
  
  ngOnInit() :void {}

  submit(form: FormGroup) :void{
    if(form.valid) {
      console.log(form.value)
    }
  }
}