Trying to Handle Removing Item From Array with Checkbox De-Select

Question

I am trying to handle pushing and removing elements from an array based on whether a checkbox is checked or not in an Angular 2 app. I know native HTML can handle some form of this logic, but I'm trying to figure out exactly what to target. This is what my function looks like:

private onOptionSelected(option)
{
    let optionObj = {
        option: option,
        complex: false
    };

    if (option)
    {
        this.record.requestedOptions.push(optionObj);
    }
    else if (!option)
    {
        this.record.requestedOptions.splice(option);
    }
}

Right now, the first part works. I can check one of the checkboxes and that item gets added to the array and saved in my backend.

However, when I uncheck that item, rather than removing it from the array, that action ALSO triggers a new item being added to the array.

So how do I handle the negative case here -- where an item is unchecked, and should thus be removed from the array? Can I target a native HTML attribute like "checked" or "!checked" or something similar?

By the way, this is what my html/view looks like:

    <div>
       <md-checkbox 
          (change)="onOptionSelected('A')">Option A
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('b')">Option B
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('c')">Option C
       </md-checkbox>
   </div>

Sushanth -- · Accepted Answer · 2017-09-26 23:17:33Z

1

You have couple of issues with the way you have written your code. - Instead of sending the option value, pass the event param in the scope. - Syntax for splice is incorrect - Check reference

Change

(change)="onOptionSelected('A')">Option A

to

(change)="onOptionSelected($event)">Option A

JS

private onOptionSelected(e) {
  let optionValue = e.target.innerHTML.split(' ')[1];
  let isChecked = e.target.checked;

  let optionObj = {
    option: optionValue,
    complex: false
  };

  if (isChecked) {
    this.record.requestedOptions.push(optionObj);
  } else {
    // find the element that contains optionValue
    let indexToDelete = undefined;

    this.record.requestedOptions.forEach((obj, currIndex) => {
         if(obj.option === optionValue) {
            indexToDelete = currIndex;
         }
    });

    if(indexToDelete !== undefined) {
       this.record.requestedOptions.splice(indexToDelete, 1);
    }
  }
}

answered Sep 26, 2017 at 23:17

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rey Over a year ago

Getting an error: Cannot read property 'innerHTML' of undefined

Rey Over a year ago

Would think I should be able to pass something via "value" instead of using innerHTML.

Sushanth -- Over a year ago

I don't have too much context with angular, but this is the basic gist. I was thinking the $event passed in as an argument is the event object.

Rey Over a year ago

I got it to work with a couple of edits. Will post momentarily. Thanks for the tips!

Collectives™ on Stack Overflow

Trying to Handle Removing Item From Array with Checkbox De-Select

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related