Change a boolean value in a array in the view Angular 2

Question

I have the following array in my component:

checkBox = [
        {label: 'SSN', name:'ssn', value: '1', checked:false},
        {label: 'Last Name', name:'lastName', value: '2', checked:false},
        {label: 'Role', name:'role', value: '3', checked:false},
        {label: 'UserId', name:'userId', value: '4', checked:false},
        {label: 'Office', name:'office', value: '5', checked:false},
        {label: ' Include Subordinates', name:'subordinates', value: '6', checked:false}
    ];

I have several checkboxes in my view that look like this:

<span class="input-group-addon">
          <input type="checkbox" name="ssn" (change)="checkBox[0].checked">
        </span>

and

<span class="input-group-addon">
          <input type="checkbox" name="lastName" (change)=checkBox[1].value>
        </span>

etc....

However when I it the submit button:

<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>

I get the output false in the component even though it one is selected and I only get one false not 6 (They're 6 checkboxes)

I was assuming I would get false, false, True, False, False, False because I need to know which checkbox is selected

  public search(e){

        for (let index = 0; index < e.length; e++){
            console.log(e[index].checked)
        }

    }

full code:

<form>
        <div class="col-lg-6 col-lg-offset-3 text-center bordered">
            <div class=" col-xs-6 ">
                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[0].label}}</label>
        </span>
                            <input #ssn type="password" name="ssnText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="lastName" (change)="checkBox[1].checked=!checkBox[1].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[1].label}}</label>
        </span>
                            <input type="text" #lastName name="lastNameTest" class="form-control" placeholder="">
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="role" (change)="checkBox[3].checked=!checkBox[3].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[2].label}}</label>
        </span>
                            <input type="text" #role name="roleText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>
            </div>

            <div class=" text-center col-xs-6">
                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="userId" (change)="checkBox[4].checked=!checkBox[4].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[3].label}}</label>
        </span>
                            <input type="text" #userId name="userIdText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" value="{{checkBox[4].value}}">
        </span>
                            <span class="input-group-addon">
          <label for="office">{{checkBox[4].label}}</label>
        </span>
                            <input type="text" #office id="office" name="officeText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox"  #subordinates name="subText" (change)="checkBox[5].checked=!checkBox[5].checked">
        </span>
                            <span class="input-group-addon">
          <label>Include Subordinates</label>
        </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="center-block">
                <button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>
                <button type="submit" class="btn btn-default btn-md right-button">Reset</button>
            </div>
        </div>
    </form>

You're incrementing the e, not the index

Robbenu
– Robbenu

2017-02-22 13:55:31 +00:00
Commented Feb 22, 2017 at 13:55 — Robbenu
– Robbenu, Commented Feb 22, 2017 at 13:55
Can you create a fiddle link

bipin patel
– bipin patel

2017-02-22 13:55:39 +00:00
Commented Feb 22, 2017 at 13:55 — bipin patel
– bipin patel, Commented Feb 22, 2017 at 13:55

Cobus Kruger · Accepted Answer · 2017-02-22 13:57:19Z

2

Try this:

public search(e){
    for (let index = 0; index < e.length; index++){
        console.log(e[index].checked)
    }
}

answered Feb 22, 2017 at 13:57

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

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

2 Comments

Mike3355 Over a year ago

That is what I posted, I have that.

Cobus Kruger Over a year ago

@Drew1208 Nope. You're incrementing the value of e. I'm incrementing index.

bergben · Accepted Answer · 2017-02-22 14:52:46Z

1

I don't see where you would change the value for the checked values? You have to use either [(ngModel)] or do

(change)="checkbox[index].checked=!checkbox[index].checked"

If you render your checkboxes with a *ngFor:

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox">
     <label>{{checkBoxElem.label}}</label>
     <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked">
</span>

To allow only one checkbox to be selected at once (just an idea, there may be a cleaner solution):

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox">
     <label>{{checkBoxElem.label}}</label>
     <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked" (change)="uncheckOtherCheckboxes(checkBoxElem.value)">

and in your component.ts:

public uncheckOtherCheckboxes(valueToKeep:number){
   this.checkBox.forEach(checkBoxElem => {
      if(checkBoxElem.value !== valueToKeep && checkBoxElem.checked){
         checkBoxElem.checked = false;
      }
   });
}

edited Feb 22, 2017 at 14:52

answered Feb 22, 2017 at 13:58

bergben

1,4151 gold badge18 silver badges36 bronze badges

5 Comments

Mike3355 Over a year ago

Doing that just causes an error saying TypeError: Cannot read property 'checked' of undefined

bergben Over a year ago

This is just pseudo code, I don't know how you render your checkboxes. If you do it with a *ngFor etc. but let me update my answer

Mike3355 Over a year ago

I didn't use *ngFor but this help solve the issue. Now I need to figure out how to only allow the user to select one checkbox.

bergben Over a year ago

I have updated my answer to provide an example for that.

Mike3355 Over a year ago

With the way I have it set up I cannot use *ngFor but would love too. Only one checkbox can be selected except for subordinates that one the only one allowed to be selected with another checkbox. Than I need to know what checkbox is selected and the text field input. I updated my question to show the full code. The way I have it set up it is only sending in one checkbox not all of them so the console.log() in the search method only works for the first checkbox

Collectives™ on Stack Overflow

Change a boolean value in a array in the view Angular 2

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related