Проверка в списке флажков Угловая 2

Question

У меня есть список бизнес-единиц, которые отображаются как флажки в регистрационной форме вместе с полем текстового поля и выполняются проверки.

<label for="inputFirstName" class="sr-only">First name</label> 
<input type="text" formControlName="firstName" class="form-control" placeholder="First name"> 

<div class="checkbox" *ngFor="let bu of businessUnits"> 
     <label><input type="checkbox" #instance value="{{bu.BuName}}" (click)="getCheckBoxValue(instance.checked, bu.BuName)">{{bu.BuName}}</label> 
    </div> 

Список бизнес-единицы извлекаются из таблицы базы данных и визуализируется при загрузке формы

businessUnits: BusinessUnit[] = []; 

В конструкторе я проверка электронной почты, как этот

"firstName": new FormControl('', [Validators.required]), 

})

Как бы я мог проверить, что хотя бы один флажок lis t чекбоксов, загруженных динамически на загрузку страницы, проверяется?

Благодаря

Answer 1

позволяет попробовать это демо: https://stackblitz.com/edit/angular-custom-form-validation?file=app/app.component.ts

2-й пары будет принимать функцию валидатора, просто передать как этого

this.fg = this.fb.group({ 
    firstName: ['', [Validators.required]], 
    bUnits: this.fb.array(
    this.businessUnits.map(() => this.fb.control('')), 
    CustomValidators.multipleCheckboxRequireOne 
) 
}); 

AppComponent

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

import { CustomValidators } from './custom.validators'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <form (ngSubmit)="onSubmit()" novalidate [formGroup]="fg"> 
     <div><input type="text" formControlName="firstName" class="form-control" placeholder="First name"></div> 
     <div formArrayName="bUnits"> 
     <div *ngFor="let unit of fg.controls.bUnits.controls; let i = index;"> 
      <p>Unit {{ i + 1 }}</p> 
      <div> 
      <label> 
       <input type="checkbox" [formControlName]="i" [value]="businessUnits[i].value"> 
       {{businessUnits[i].name}} 
      </label> 
      </div> 
     </div> 
     </div> 

     <button type="submit">Submit</button> 
     <p>Status {{ fg.valid }}</p> 
    </form> 
    ` 
}) 
export class AppComponent implements OnInit { 
    fg: FormGroup; 
    businessUnits: any[] = []; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    // do some stub to grab data 
    this.businessUnits = [ 
     {name: 'BU 1', value: "1"}, 
     {name: 'BU 2', value: "2"}, 
     {name: 'BU 3', value: "3"} 
    ]; 
    this.fg = this.fb.group({ 
     firstName: ['', [Validators.required]], 
     bUnits: this.fb.array(
     this.businessUnits.map(() => this.fb.control('')), 
     CustomValidators.multipleCheckboxRequireOne 
    ) 
    }); 

    } 

    onSubmit() { 
    console.log(this.fg); 
    } 
} 

CustomValidators

import { FormArray } from '@angular/forms'; 

export class CustomValidators { 
    static multipleCheckboxRequireOne(fa: FormArray) { 
    let valid = false; 

    for (let x = 0; x < fa.length; ++x) { 
     if (fa.at(x).value) { 
     valid = true; 
     break; 
     } 
    } 
    return valid ? null : { 
     multipleCheckboxRequireOne: true 
    }; 
    } 
}