vendredi 18 septembre 2020

Group checkbox interaction in Angular

I have data coming from service as below:

var data = [
  {
     "name": "A1",
     "group": ["a1", "b1", "c1"]
  },
  {
     "name": "A2",
     "group": ["a2", "b2", "c2"]
  }
]

And I have created the below form

<table>
  <thead>
    <tr>
      <td>Category</td>
      <td>Option</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data; let i=index">
      <td>
        <input type="checkbox"> 
      </td>
      <td *ngFor="let items of data[i].group; let j=index">
        <input type="checkbox"> 
      </td>
    </tr>
  </tbody>
</table>

You can see the code here

I need to add validation on these checkboxes.

  1. Atleast one of the category(A1,A2) must be selected.
  2. If a category is selected atleast one of the option(for A1: atleast one of a1,b1,c1) must be selected.

I can set a boolean value if both conditions are satisfied and validate the form. Kindly help




Aucun commentaire:

Enregistrer un commentaire