如何在复选框组上添加必填字段验证？

Question

我有 4 个复选框，其中至少一个应该由用户选择。由于我是 Angular 2 的新手，所以有人可以帮我解决这个问题吗？

更新代码 sn-p:

HTML

<b><label *ngFor="let type of topics;let i=index" class="checkbox-inline">
                    <input  type="checkbox" id="{{'chkPhysician'+i}}" name="chekType"
                         formControlName="types" [value]="type.value" />
                    {{type.display}}
                    </label>

组件.ts

public topics = [
{ value: 'test1', display: 'test1',selected:true },
{ value: 'test2', display: 'test2',selected:true },
{ value: 'test3', display: 'test3',selected:true },
{ value: 'test4', display: 'test4',selected:true },

];

constructor(private fb: FormBuilder) { }
ngOnInit(): void {
    this.mirForm = this.fb.group({
        date: [this.date, Validators.required],
        Name: ['', [Validators.required, Validators.minLength(4)]],
        Mobile: ['', [Validators.required, Validators.minLength(10)]],
        Email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+')]],
        types:'', etc..............

Answer 1

使用change 事件

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>

或者您可以尝试使用CheckboxRequiredValidator。

Answer 2

您有几个问题...如果您希望能够选中多个复选框，您实际上需要一个表单数组，而不仅仅是一个表单控件。

然后我会检查自定义验证器是否选中了至少一个复选框。所以表单的构建应该如下所示（缩短）：

this.mirForm = this.fb.group({
  types: this.fb.array([])
}, {validator:this.checkIfChecked});

然后你会得到你的复选框，然后我们会寻找点击事件并查看复选框是选中还是未选中。基于这些，我们要么向表单数组添加表单控件，要么移除表单控件。

<input  type="checkbox" 
        (click)="addRemoveToArr(type.value, $event.target.checked)" 
        id="{{'chkPhysician'+i}}" 
        name="chekType"
        [value]="type.value" 
/>

和功能：

addRemoveToArr(type:string,isChecked:boolean) {
  const types = <FormArray>this.myForm.get('types')
  if (isChecked){
    types.push(new FormControl(type))
  }
  else {
    let index = types.controls.findIndex(x => x.value == type)
    types.removeAt(index)
  }
}

最后是自定义验证器，如果至少选中一个复选框，则返回 null，否则返回 notValid 错误。

checkIfChecked = (control: AbstractControl) => {
  if(control.controls.types.length == 0) {
    return {notValid:true}
  } else {
    return null;
  }    
};