如何驗證是否應該選擇至少一個複選框？

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