如何验证复选框列表？

Question

我正在尝试验证与我的列表数据关联的复选框。我想检查是否选中了列表中的所有复选框。

<li class="checkbox-wrap" *ngFor="let data of setupData">
    <span *ngFor="let groupdata of data.groupTypes">
         <span *ngFor="let servicedata of groupdata.printServices">
              <md-checkbox [checked]="selectAll" (click)="checkedService()">{{data.serviceCategoryDisplayName}} / {{groupdata.groupTypeDisplayName}} / {{servicedata.printServiceDisplayName}}</md-checkbox>
         </span>
       </span>
     </li>

请提出一种检查是否选中所有复选框的方法。

Answer 1

您可以为复选框指定一个带有循环索引的 ID：

<span *ngFor="let servicedata of groupdata.printServices; index as i">
          <md-checkbox id="id_{{i}}" [checked]="selectAll" (click)="checkedService()">{{data.serviceCategoryDisplayName}} / {{groupdata.groupTypeDisplayName}} / {{servicedata.printServiceDisplayName}}</md-checkbox>
</span>

为了验证您可以获得这样的值：

for(let item in this.data){
   var input = document.querySelector("#id_"+i);
   console.log(input.checked);
   i++;
}

你可以在这里测试： https://stackblitz.com/edit/angular-gf5zss?file=src%2Fapp%2Fapp.component.ts

如何验证复选框列表？

How to validate checkbox list?

typescript

angular5