Disable checkboxes in a table based on formvalues angular

Question

I have a Form field named Value.

I have a add button which duplicates the form.

I have a table button which shows and a back button to hide the table.(Forget abt the delete button)

The table has a column that is full of checkboxes. Now in the table, I will click as many checkboxes as the value I entered in the value-form.

Say for example if I had entered 2 in that form I can click up to 2 checkboxes in that table.

After that then I come back to the form by clicking the back button.

My problem:

Now my problem is When I click add button again and if I duplicate another value form and enter another value 3 and if I go check the table you can see that the checkboxes are unchecked. Instead what I want is that the checkboxes which I have checked earlier before should be disabled.

I have explained my problem as clearly as I could. If you have a doubt about my question please comment. Thanks.

Note: In my stackblitz I have posted a sample of my code in a simple(without rich UI) way

Stackblitz: https://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.ts

Answer 1

As my understanding you want to keep your checkboxes checked even after table closed and reopened,

You can do this with event binding:

<td>
    input  type="checkbox" id="vehicle2" name="vehicle2" 
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
  </td>


  <td *ngIf="list.isDisabled">
            Already disabled
    </td>



addCheckValue(index,isChecked){
    if(isChecked === undefined){
      isChecked = true
    }
    this.listes[index].isTicked = isChecked;

  }



//disabled checked boxes on close 
this.listes = this.listes.map(e => {
      if (e.isTicked === true) {
        e.isDisabled = true;
      }
      return e;
});

your edited repo