如何验证 Angular 中至少选中了一个复选框

Question

我有一个角度复选框列表，需要验证是否至少选择了一个。

复选框项目是动态的（它们来自服务），因此它不是静态列表。一次可能有 3 个元素，另一次可能有 50 多个元素，等等。

模板是这样的：

<tr *ngFor="let recipient of recipients">
      <td class="disable edit">
        <div>
          <span class = "textbluesmall"><input type="checkbox"   [checked]="true" value="{{recipient?.participantId }}" name="participant" />{{recipient?.lastName }} ,{{recipient?.firstName }}</span>
        </div>
      </td>
      <td class="disable edit">
        <div>
          <span>{{recipient?.email }}</span>
        </div>
      </td>
    </tr>

我正在尝试以这种方式解决，但它不起作用

.TS 文件：

  var checkboxs=document.getElementsByName('participant');
  var okay=false;
  for(var i=0,l=checkboxs.length;i<l;i++)
  {
    if(checkboxs[i].checked){
      okay=true;
      break;
    }
  }
  if(okay){
    return true;
  }
  else{
    return false;
  }
} 

How can I do this the easiest way?

Answer 1

你的构造函数

constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      recipients: new FormArray([], minSelectedCheckboxes(1))
    });

添加这个功能

function minSelectedCheckboxes(min = 1) {
  const validator: ValidatorFn = (formArray: AbstractControl) => {
    if (formArray instanceof FormArray) {
      const totalSelected = formArray.controls
        .map((control) => control.value)
        .reduce((prev, next) => (next ? prev + next : prev), 0);
      return totalSelected >= min ? null : { required: true };
    }

    throw new Error('formArray is not an instance of FormArray');
  };

  return validator;
}