title: How to select only one checkbox in dynamic form in angular 8
body: <p>I have a dynamic form which is producing 8 different checkboxes according to the API response. Now I want the user to be able to select only 1 check box at a time. If the user wants to select a different checkbox he first has to deselect the selected checkbox. Please refer to the code below.</p>
  <pre><code>&lt;ng-container *ngIf=&quot;field.inputType==='group';else singleCase&quot;&gt;
      &lt;p class=&quot;font20&quot; *ngIf=&quot;field.label&quot;&gt;{{'label.' + field.name | translate}}&lt;/p&gt;
      &lt;div class=&quot;row purFin table-responsive pb-3 mb-2 mt-4&quot;&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;ng-container [formArrayName]=&quot;field.name&quot;
            *ngFor=&quot;let item of group.controls[field.name].controls; let i = index&quot;&gt;
            &lt;input type=&quot;checkbox&quot; class=&quot;hidden&quot; (click)=&quot;preventCheck($event)&quot; (change)=&quot;onChange($event)&quot; [formControlName]=&quot;i&quot;
              [name]=&quot;field.name + i+1&quot; [id]=&quot;field.name + i+1&quot;&gt;
            &lt;label class=&quot;btn-outline-secondary mr-3 mt-1 but&quot; [for]=&quot;field.name + i+1&quot;&gt;
              {{field.options[i].value}}
            &lt;/label&gt;
          &lt;/ng-container&gt;
          &lt;div class=&quot;col-12&quot;&gt;
            &lt;span *ngIf=&quot;'sub_text.' + field.name | translate&quot;
              class=&quot;font12&quot;&gt;{{'sub_text.' + field.name | translate}}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;group.get(field.name).invalid &amp;&amp; (group.get(field.name).dirty || group.get(field.name).touched)&quot;
        class=&quot;error-msg&quot;&gt;
        &lt;ng-container *ngFor=&quot;let validation of field.validations&quot;&gt;
          &lt;div *ngIf=&quot;group.get(field.name).hasError(validation.name)&quot;&gt;{{validation.message}}&lt;/div&gt;
        &lt;/ng-container&gt;
      &lt;/div&gt;
    &lt;/ng-container&gt;
  </code></pre>