html表单多选框验证,表单 – 如何验证是否应选择至少一个复选框？

考虑创建一个包含复选框组的FormGroup,并将组的选中值绑定到带有必需验证器的隐藏formcontrol.

消耗你有三个复选框

items = [

{key: 'item1', text: 'value1'}, // checkbox1 (label: value1)

{key: 'item2', text: 'value2'}, // checkbox2 (label: value2)

{key: 'item3', text: 'value3'}, // checkbox3 (label: value3)

];

第1步：为您的复选框定义FormArray

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

})));

*easy to show via ngFor

步骤2：创建隐藏的必需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));

});

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

Step3：创建最终表单组包含下面的复选框组和隐藏的formControl

this.form = new FormGroup({

items: checkboxGroup,

selectedItems: hiddenControl

});

Html模板：

{{ control.controls.text.value }}

checkbox group is required!

---

{{form.controls.selectedItems.value | json}}

参考这个demo.