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

Question

我有一个包含 angular 个复选框的列表，需要验证是否至少选中了一个。

复选框项目是动态的（它们来自服务）所以它不是静态列表。一次可能有 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

由于必须动态创建复选框，因此您需要在 Angular 中使用 Reactive Forms。

Reactive Forms主要由三种类组成，即

FormGroups
FormArray
FormControl

为了能够动态创建复选框，您需要先在 module.ts 文件中导入 FormsModule 和 ReactiveFormsModule，然后将它们添加到 imports @NgModule 装饰器数组。

同样在您的 component.ts 文件中导入 FormBuilder 和 FormGroup。然后使用 FormBuilder 服务创建将在模板中声明的 FormGroup。

export class AppComponent {
  form: FormGroup;
  arrayOfRecepients = [];

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

}

在您的模板文件中，将表单元素与 [formGroup]="form"

绑定

<form [formGroup]="form">
  <!-- Template code for checkboxes -->
</form>

遍历您的收件人数组，将 FormControl 的新实例推送到 FormArray。将控件设置为 false，以便将复选框标记为未选中。这样，表单数组会将每个单独的复选框视为其控件集合的一部分。

this.arrayOfRecepients.forEach(() => this.recipientsFormArray.push(new FormControl(false)));

在您的模板文件中，使用 *ngFor 指令遍历您的收件人数组。将 formArrayName 定义为收件人，因为它是通知表单 API.

所必需的

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="recipients" *ngFor="let recepient of recipientFormArray.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{arrayOfRecipients[i].name}}
  </label>
</form>

为了验证复选框，您需要将验证器函数作为第二个参数传递给 FormArray。

验证器函数应该将您的 formArray 和最少选中的复选框数作为输入。它应该抓取控件的值，计算为真的控件值的计数，然后将计数与最小值进行比较。

TLDR;

为了您的参考，请找到 link 工作演示 here

Answer 2

正如@thisdotutkarsh 回答的那样，正确的方法是使用响应式表单。但实际上，如果您需要以“原始方式”进行操作，您可以这样做：

validateCheckboxes() {
this.vals = document.getElementsByName('participant');
var recpNum = 0;

for (var i = 0, n = this.vals.length; i < n; i++) {
  if  (this.vals[i].checked ){
    recpNum++;
  }
}
if(recpNum == 0){
  return false;
}else{
  if(recpNum > 0){
  return  true
  }
}}

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

How to validate at least one checkbox is selected in Angular

forms

typescript

reactive

angular