在复选框列表中进行验证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 
    }; 
    } 
}