Angular Reactive Forms handle two level / dimensional checkboxes

Question

I am using Angular 6/7 with reactive forms, I have a form with a list of permissions(two checkboxes in one row), for example, lets say each checkbox is a permission, by default the second checkbox in the row needs to be disabled on the first load and only enabled when the user clicks/checks the first checkbox in the row.

The flow:

The user can only click on the first checkbox in the row, for example, permission1,2,3 or 4.
If the user clicks/checks the first checkbox in the row, onChange event I need to enable the second checkbox.
On Submit - I need to fetch the ids of permissions and also if the user clicked on the second checkbox in of the rows, I need to fetch/save that information as a boolean flag, for example, lets say canGrantPermission: true/false.

Super simple code example: https://stackblitz.com/edit/angular-ibb7ps

At the end I would like to have something like this:

permissions: [
  {permissionId: 1, canGrant: false}, 
  {permissionId: 2, canGrant: true}
]

Marshal · Accepted Answer · 2018-12-13 14:06:22Z

The below solution is based on the assumption you don't need a FormControl on the second checkbox, if you do, please let me know.

You can do something like below to accomplish this.

Create templatRef #firstCheck on input one

<input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i)">

On input two disabled second check if #firstCheck is checked [disabled]="!firstCheck.checked", then create tempalteRef #secondCheck and set secondCheck.checked value to orders.allowGrant on click.

<input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (click)="orders[i].allowGrant = secondCheck.checked">

In submit() push values to resultsArray if first box is checked and console.log

  const resultsArray = []
      for(let i = 0; i < this.form.get('orders').value.length; i++){
        if(this.form.get('orders').value[i]){
          resultsArray.push({id:this.orders[i].id, allowGrant:this.orders[i].allowGrant})
        }
      }

    console.log(resultsArray);

To un-check second checkbox on first deselect you can do something like below.

I did this all in the view without method... set secondCheck and allowGrant to false on first click, use (change) on secondCheck instead of (click) like I had before.

 <input #firstCheck type="checkbox" [formControlName]="i" (change)="onPermissionChange(i); secondCheck.checked = false; orders[i].allowGrant = secondCheck.checked">
    <input #secondCheck type="checkbox" [disabled]="!firstCheck.checked" (change)="orders[i].allowGrant = secondCheck.checked">  </label>

please see revised stackblitz

Stackblitz

https://stackblitz.com/edit/angular-xpcz82?embed=1&file=src/app/app.component.html

Wow @Marshal, pretty much everything is working as needed for me, just one thing, do you know how can I fix in your example this problem, that first and second checkbox is checked and then the user clicks Only one the first checkbox, and it needs to disable/uncheck also the second checkbox(disabled) in one go? Do I need to user [checked]="" here for that?
But now I can't uncheck the second checkbox if both of them are checked on stackblitz, do you know how to fix that? Thanks!
sorry about that, see revision to answer and stackblitz. Revision is using the view only
Everything works as needed, thanks for your time - @Marshal, have a nice day! :)

Collectives™ on Stack Overflow

Angular Reactive Forms handle two level / dimensional checkboxes

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related