在複選框列表中進行驗證Angular 2

Question

我有一個業務單元列表，這些業務單元在註冊表單中隨着textbox字段呈現爲複選框，並且正在進行驗證。

<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在頁面加載時動態加載的checboxes是否被檢查？

感謝

Answer 1

讓試試這個演示：https://stackblitz.com/edit/angular-custom-form-validation?file=app/app.component.ts

第二PARAM將接受驗證功能，只是通過這樣

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 
    }; 
    } 
}