如何验证至少应选中一个复选框? [英] How to validate that at least one checkbox should be selected?

问题描述

我想在此处对不带表单标签的复选框进行验证. 至少应选中一个复选框.

I want to do validation for checkboxes here without form tag. At least one checkbox should be selected.

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

对于其他字段，我将要求填写并执行错误|有效等操作，但是由于复选框不是单个输入，因此无法在每个复选框中都输入要求，因为所有复选框都必须选中.因此，应该如何进行验证以提醒用户至少一个?

for other field I will put required and do the error|touched|valid etc. but since checkbox is not single input, I cannot put required in every checkbox because all checkbox will be compulsory to checked. so how do I do the validation to alert user atleast one should be checked?

推荐答案

考虑创建一个包含您的复选框组的FormGroup，并将该组的检查值绑定到具有所需验证器的隐藏formcontrol上.

consider creating a FormGroup which contains your check-box group and bind the group's checked value to a hidden formcontrol with a required validator.

假设您有三个复选框

items = [
  {key: 'item1', text: 'value1'},      // checkbox1 (label: value1)
  {key: 'item2', text: 'value2'},      // checkbox2 (label: value2)
  {key: 'item3', text: 'value3'},      // checkbox3 (label: value3)
];

步骤1:为复选框定义FormArray

Step1: define FormArray for your check boxes

let checkboxGroup = new FormArray(this.items.map(item => new FormGroup({
  id: new FormControl(item.key),      // id of checkbox(only use its value and won't show in html)
  text: new FormControl(item.text),   // text of checkbox(show its value as checkbox's label)
  checkbox: new FormControl(false)    // checkbox itself
})));

*易于通过 ngFor

第二步:创建一个隐藏的必需formControl来保持复选框组的状态

let hiddenControl = new FormControl(this.mapItems(checkboxGroup.value), Validators.required);
// update checkbox group's value to hidden formcontrol
checkboxGroup.valueChanges.subscribe((v) => {
  hiddenControl.setValue(this.mapItems(v));
});

我们只关心隐藏控件的必需验证状态，不会在html中显示此隐藏控件.

we only care about hidden control's required validate status and won't show this hidden control in html.

步骤3:创建最终表单组，其中包含以下复选框组和隐藏的formControl

this.form = new FormGroup({
  items: checkboxGroup,
  selectedItems: hiddenControl
});

HTML模板:

<form [formGroup]="form">
  <div [formArrayName]="'items'" [class.invalid]="!form.controls.selectedItems.valid">
    <div *ngFor="let control of form.controls.items.controls; let i = index;" [formGroup]="control">
      <input type="checkbox" formControlName="checkbox" id="{{ control.controls.id.value }}">
      <label attr.for="{{ control.controls.id.value }}">{{ control.controls.text.value }}</label>
    </div>
  </div>
  <div [class.invalid]="!form.controls.selectedItems.valid" *ngIf="!form.controls.selectedItems.valid">
    checkbox group is required!
  </div>
  <hr>
  <pre>{{form.controls.selectedItems.value | json}}</pre>
</form>

请参考演示.

这篇关于如何验证至少应选中一个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！