Question

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

更新了代码段：

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>

component.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;
  }    
};

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

2 个答案: