Una funzionalità molto comune nelle interfacce è quella di avere una lista di checkbox dove l'utente deve selezionarne almeno una. Basta pensare ad una form di un sondaggio dove l'utente può rispondere a una domanda con risposte multiple.
In questi casi i validatori di default di Angular non possono venire in nostro aiuto, quindi dobbiamo crearne uno noi.

Nello script #232 abbiamo già visto come creare un validatore custom quindi in questo script andremo direttamente a vedere il codice.

export function atLastOneCheckSelected(): ValidatorFn {
  return function(control: FormGroup): ValidationErrors {
    let isOneSelected = false;
    Object.keys(control.controls).forEach(key => {
      const value = control.get(key).value;
      if (value) {
        isOneSelected = true;
      }
    });
    return isOneSelected ? null : { NoOneChecked: true };
  };
}

In questo validatore, prendiamo in input un oggetto di tipo FormGroup e ne scorriamo gli oggetti. Se almeno uno di questi ha un valore (quindi è stato selezionato dall'utente), allora il validatore torna null (a indicare che non ci sono errori di validazione), altrimenti torna un oggetto con la proprietà NoOneChecked impostata a true.
Per inserire il validatore in una form con molti controlli, dobbiamo isolare le checkbox in un loro FormGroup (innestato in quello principale) e applicare il validatore a questo FormGroup come mostrato nel prossimo esempio.

this.form = this.fb.group({
  options: this.fb.group(
    {
      check1: [false],
      check2: [false],
      check3: [false]
    },
    { validators: [atLastOneCheckSelected()] }
  ),
  otherField1: [''],
  otherField2: ['']
});

In questo esempio, abbiamo crate un FormGroup con il controllo options che è a sua volta un FormGroup che contiene le checkbox e al quale viene applicato il validatore. Successivamente vengono aggiunti altri due controlli alla form principale.