How to validate at least one checkbox is selected in Angular

I have a list of angular checkboxes and need to validate if at least one is selected.

The checkbox items are dynamic(they come from a service) so it is not a static list. One time it could have 3 elements and other time could have 50+ etc.

The template goes like this:

<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>


And I'm trying to solve this way but it is not working

.TS FILE:

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

How can I do this the easiest way?

Continue reading...