Angular 4 check multiple checkboxes

Question

I have a form with User roles displayed as multiple checkboxes:

<div *ngFor="let role of roles">
            <label for="role_{{role.id}}">
              <input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}} &nbsp;&nbsp;
            </label>
          </div>

the roles object loaded from server looks like this which have all the roles that displayed on the form:

{id: 1, name: "HQ", description: "A Employee User", created_at: "2017-10-07 10:43:17",…}
1
:
{id: 2, name: "admin", description: "A Manager User", created_at: "2017-10-07 10:43:17",…}
2
:
{id: 3, name: "caretaker", description: "", created_at: null, updated_at: null}

now i want to set multiple check boxes using form.setValue, my user object loaded from server looks like this: "roles" in the user object are the roles that are assigned to the user and needs to be checked on the form

{
"id":13,
"name":"Wasif Khalil",
"email":"[email protected]",
"created_at":"2017-10-07 10:43:17",
"updated_at":"2017-10-09 07:45:34",
"api_token":"LKVCGPGnXZ3LyiCnyiTAg8XTpck6xWlVkeoMBgtoYZWoAOy4b5epNqMz7KG7",
"roles":[
     {"id":2,"name":"admin","description":"A Manager User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"2","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17"}
     },
     {"id":1,"name":"HQ","description":"A Employee User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"1","created_at":null,"updated_at":null}
     }
   ]
}

after loading user object form server im setting values like this:

this.form.setValue({
                        name: user.name,
                        email: user.email,
                        password:"",
                        confirm_password:"",
                        roles: [1] //here im not sure how to set roles
                    });

can someone help me check the checkboxes with the loaded user roles object. Thanks in advance

EDIT: Sorry for not explaining it well, i have edited my question to explain the question again: the roles on user object are the roles that are assigned to user and the roles object is the list of all roles to display in form, look at the image below:

I don't recognise the syntax, is ngModel not supposed to be ngModel="yourvalue"? — trees_are_great
– trees_are_great, Commented Oct 9, 2017 at 12:36
Why dont you just overwrite the value rather than using the setValue? — LiverpoolOwen
– LiverpoolOwen, Commented Oct 9, 2017 at 12:38
I suggest that you switch to use reactive forms for what you want to do. You will want to use patchValue, not setValue, becuase setValue is used when you want to change all the values, not just a subset. — trees_are_great
– trees_are_great, Commented Oct 9, 2017 at 12:43

Vega · Accepted Answer · 2017-10-09 14:12:17Z

1

You don't have to use reactive forms to make it done.

HTML

  <input ...[checked]="check(user.roles,role.id)" ...>

Typescript:

check(value1, value2){
  return (value1.filter(item => item.id == value2)).length
}

DEMO

answered Oct 9, 2017 at 14:12

Vega

28.8k28 gold badges121 silver badges151 bronze badges

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

3 Comments

Wasif Khalil Over a year ago

awesome thanks (Y) it worked, i just had to make one change, the "users" object you defined is a sinle user object so i dont need to add another ngfor on the view, i just renamed "users" to "user" and removed users ngfor

Wasif Khalil Over a year ago

one question, i cannot add validation if i dont add ngModel and when i add validations it checks all checkboxes, any solution for that?

Vega Over a year ago

Glad it worked! :) The update should add the missing role to the user by adding a new line and unchecking should remove it, I guess ? Is there an order of roles to respect?

Collectives™ on Stack Overflow

Angular 4 check multiple checkboxes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related