Search code examples
javascriptangularangular2-forms

Make the state of multiple checkboxes Checked in Angular depending on the received data

I want to mark multiple checkboxes checked based on the data I retrieve or in other words keep there state the same as when the form was submitted, I have a form with multiple checkboxes in it, and there is also an edit button which allows me to edit the form while it was easy to retrieve the same data for input[text] I'm unable to figure out how can I change the state of checkboxes to Checked as the data I receive is in form of an array which looks like this ["M", "3XL", "7XL", "10XL"].

enter image description here

Now I want to keep those checkboxes checked when the form was submitted when the user click's edit button.

Component.ts

  checkArrayEBXBR = [];
  checkArrayJEBXO = [];
  checkboxObject = [
    {
      checkboxLabel: "EBXBR",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
    {
      checkboxLabel: "JEBXO",
      checkboxContainer: [
        {
          id: "0",
          label: "S",
          isChecked: false,
        },
        {
          id: "1",
          label: "M",
          isChecked: false,
        },
        {
          id: "2",
          label: "L",
          isChecked: false,
        },
        {
          id: "3",
          label: "XL",
          isChecked: false,
        },
        {
          id: "4",
          label: "2XL",
          isChecked: false,
        },
        {
          id: "5",
          label: "3XL",
          isChecked: false,
        },
        {
          id: "6",
          label: "4XL",
          isChecked: false,
        },
        {
          id: "7",
          label: "5XL",
          isChecked: false,
        },
        {
          id: "8",
          label: "6XL",
          isChecked: false,
        },
        {
          id: "9",
          label: "7XL",
          isChecked: false,
        },
        {
          id: "10",
          label: "8XL",
          isChecked: false,
        },
        {
          id: "11",
          label: "9XL",
          isChecked: false,
        },
        {
          id: "12",
          label: "10XL",
          isChecked: false,
        },
      ],
    },
  ];

  changeSelection() {
    this.fetchSelectedItems();
  }
  fetchSelectedItems() {
    this.ebxbrselectedItemsList = this.checkboxObject[0].checkboxContainer.filter(
      (value, index) => {
        return value.isChecked;
      }
    );
    this.checkArrayEBXBR = [];
    this.checkArrayJEBXO = [];
    for (let i = 0; i < this.ebxbrselectedItemsList.length; i++) {
      this.checkArrayEBXBR.push(this.ebxbrselectedItemsList[i].label);
    }
    for (let i = 0; i < this.jebxoselectedItemsList.length; i++) {
      this.checkArrayJEBXO.push(this.jebxoselectedItemsList[i].label);
    }
    console.log(this.checkArrayJEBXO)
    console.log(this.checkArrayEBXBR)
  }

component.html

<div class="form-group selection-container">
          <h5 class="form-title">SKU</h5>
          <div class="row" *ngFor="let item of checkboxObject; let i = index">
            <div class="col-12">
              <div class="form-group size-code">
                <ion-label class="item-code">{{item.checkboxLabel}}</ion-label>
                <ion-checkbox slot="end" value="pepperoni"></ion-checkbox>
              </div>
            </div>
            <div class="col-12">
              <div class="sizes-container">
                <div class="form-group" *ngFor="let innerItem of checkboxObject[i].checkboxContainer">
                  <ion-label for="{{item.id}}" >{{ innerItem.label }}</ion-label>
                  <ion-checkbox
                    slot="end"
                    [(ngModel)]="innerItem.isChecked"
                    (ionChange)="changeSelection()"
                    name="{{ innerItem.isChecked }}"
                    [value]="innerItem.label"
                    id="{{innerItem.id}}"
                  ></ion-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>

as you can also notice there are 2 sets of checkboxes and for each of them I have created a separate array, And I have many more of these sets I if there is a better way than making an array for each of them I would be thankfull to know.

Solution

  • If you want the checkboxes to be checked, the <ion-checkbox> has a property called checked and you can use it to bind with a value.. something like this in your case:

    <ion-checkbox
          slot="end"
          [(ngModel)]="innerItem.isChecked"
          (ionChange)="changeSelection()"
          name="{{ innerItem.isChecked }}"
          [value]="innerItem.label"
          id="{{innerItem.id}}"
          [checked]="innerItem.isChecked" // Add this line. 
></ion-checkbox>

    That attribute will keep the checkbox checked if the value is true.