如何以角度反应形式仅计算 5 个复选框值

Question

我有一个表单数组，其中有复选框。我希望用户只选择 5 个复选框值。然后将复选框值推送到数组中。我希望只有 5 个选定的复选框值必须在数组中推送为 true，而其余未选中的复选框值必须推送为 false。

component.html 文件

<input type="checkbox" #checkBox formControlName="Viewable" class="form-control checkbox" (change)="selectViewable($event)" />

我尝试过以下操作。 It gives proper toastre when more than 5 values are selected but when we select 6th checkbox value it does not show on ui but it set its value as true.

component.ts 文件

selectViewable(event){
  
    if(event.target.checked === true){
      if(this.counter < 5){
         this.counter++
      } else {
         event.target.checked = false;
         this.toastrService.info("You cannot select viewable more than 5");
      }
    } else if(this.counter>0){
      this.counter--;
    } 
}
   
submit() {
    analyticsInfoArray=[];
    const formRawValue = this.addAnaGroupForm.getRawValue();
    for (let i = 0; i < formRawValue.AnalyticsInfo.length; i++) {
      let viewable = formRawValue.AnalyticsInfo[i].Viewable
      analyticsInfoArray.push(viewable)
    }
}