如何验证是否应该选择至少一个复选框？

Question

我想在这里没有窗体标记的情况下对复选框进行验证。 应至少选择一个复选框。

<div *ngFor="let item of officeLIST"> 
    <div *ngIf=" item.officeID == 1"> 
    <input #off type="checkbox" id="off" name="off" value="1" [(ngModel)]="item.checked"> 
    <label>{{item.officename}}</label> 
    </div> 

    <div *ngIf="item.officeID== 2"> 
    <input #off type="checkbox" id="off" name="off" value="2" [(ngModel)]="item.checked"> 
    <label>{{item.officename}}</label> 
    </div> 

    <div *ngIf="item.officeID== 3"> 
    <input #off type="checkbox" id="off" name="off" value="3" [(ngModel)]="item.checked"> 
    <label>{{item.officename}}</label> 
    </div> 
</div> 

其他领域我会把所需做的错误|感动|有效等，但因为复选框是不是单一的输入，我不能把每一个复选框必需的，因为所有的复选框将被强制托运。那么我该如何做验证来提醒用户至少应该检查一个？

Answer 1

考虑使用FormGroup和Validators实现这一目标。

• 定义一组为您的复选框
• 指定一组验证

---

import { NgModule, Component }  from '@angular/core'; 
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormArray, FormBuilder, Validators }  from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    styles: [` 
    div {padding:5px; margin: 10px 0;} 
    .invalid {background-color: #ffd4d4;} 
    `], 
    template: ` 
    <form [formGroup]="modelForm"> 
     <div [formArrayName]="'items'" [class.invalid]="!modelForm.controls.selectedItems.valid"> 
     <div *ngFor="let language of modelForm.controls.items.controls; let i = index;" [formGroup]="language"> 
      <input type="checkbox" formControlName="checked" id="language_{{ language.controls.key.value }}"> 
      <label attr.for="language_{{ language.controls.key.value }}">{{ language.controls.value.value }}</label> 
     </div> 
     </div> 
     <div [class.invalid]="!modelForm.controls.selectedItems.valid" *ngIf="!modelForm.controls.selectedItems.valid"> 
     checkbox group is required! 
     </div> 
     <hr> 
     <pre>{{modelForm.controls.selectedItems.value | json}}</pre> 
    </form> 
    ` 
}) 
export class AppComponent { 

    modelForm:FormGroup; 
    items = [ 
    {key: 'item1', value: 'value1'}, 
    {key: 'item2', value: 'value2'}, 
    {key: 'item3', value: 'value3'}, 
    ]; 

    constructor(){ 
    } 

    ngOnInit() { 
    let group = []; 

    this.items.forEach((l) => { 
     group.push(new FormGroup({ 
     key: new FormControl(l.key), 
     value: new FormControl(l.value), 
     checked: new FormControl(false), 
    ); 
    }); 

    let formControlArray = new FormArray(group); 

    this.modelForm = new FormGroup({ 
     items: formControlArray, 
     selectedItems: new FormControl(this.mapItems(formControlArray.value), Validators.required) 
    }); 

    formControlArray.valueChanges.subscribe((v) => { 
     this.modelForm.controls.selectedItems.setValue(this.mapItems(v)); 
    }); 
    } 

    mapItems(items) { 
    let selectedItems = items.filter((l) => l.checked).map((l) => l.key); 
    return selectedItems.length ? selectedItems : null; 
    } 
} 

请参阅本plunker。

Answer 2

验证（即例如某个点击事件）迭代您的数组并检查是否至少有一个项目为真。

let isSelected: any = this.officeLIST.filter((item) => item.checked === true); 
if(isSelected != null && isSelected.length > 0) { 
//At least one is selected 
}else { 
alert("select at least one"); 
} 

Answer 3

您应该检查表单元素的感动和肮脏的环境

<form #myForm="ngForm" *ngIf="active" (ngSubmit)="onSubmit()"> 

    <div class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" id="name" class="form-control" 
       required name="name" [(ngModel)]="myform.name" 
       #name="ngModel" > 
     <div *ngIf="name.errors && (name.dirty || name.touched)" 
      class="alert alert-danger"> 
      <div [hidden]="!name.errors.required"> 
       Name is required 
      </div> 
     </div> 
    </div> 

</form> 

可以结合前面我的回答对两种情况下

Answer 4

您可以检查阵“officeList”通过使用映射函数，您可以遍历数组中的每个“对象”，并检查每个“object.checked”，并且如果至少发现一个“object.checked”为true，则意味着至少有一个复选框被选中else显示错误消息。在提交按钮上应用此'onClick（）'功能。希望能帮助到你。 事情是这样的：

提交

在component.ts：

onClick(){ 
    let flag=false; 
    this.officeList.map(function(obj){ 
     if(obj.checked===true){ 
      flag=true; //set the flag again 
     } 
    }) 
    if(flag===false){ 
     alert('atleast one checkbox should be checked'); 
     flag=true; //reset the flag again 
    } 
}