Checkbox array show item checked in list

Question

I have list of all company roles that can be added to user, and also I have list that I get from user for roles that he currently have. Both i get from service. I want to compare these two lists and roles that exist make checked when I show them in html list.

My html:

<div class="roles-div">
<div style="text-align: center;">
    <label class="label-roles">Select User Roles</label>
</div>
<form #rolesForm="ngForm" (ngSubmit)="submitRole(rolesForm)" >
<div class="flex-column-center">
    <div class="flex-center width90 height300 checkbox-div">
        <div>
            <ul>
                <li *ngFor="let role of context.roles">
                    <input class="roles-li" type="checkbox" [(ngModel)]="role.id" name="role">{{ role.label }}
                </li>
            </ul>
        </div>
    </div>
    <div class="flex-column-center2 width35">
        <button class="btn-main10" type="submit">Submit</button>
    </div>
</div> 
</form>

My ts:

export class AddRolePopupComponent extends PopupAbstract<any> implements 
    OnInit {
    userRoles = [];


    constructor( private userService: UserService, private companyService: CompanyService, public dialog: DialogRef<any> ) {

        super( dialog, dialog.context );
    }

    ngOnInit() {        
        this.userService.getRolesForUser(this.context.id).subscribe(
            response => { this.handleSucess( response ); },
            error => { console.error( error ); },
        );
        }


    handleSucess(response) {
            this.userRoles = response;
    }

    submitRole(rolesForm){
        console.log(rolesForm.value);
    }   
}

What should I do to get my existing roles checked?

can you log context.roles and userRoles and tell me their content ? — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 24, 2017 at 15:46
Context.roles are array: roles : Array(2) 0 : {id: "cb53681a-608f-4ea5-a9a4-3826b30684b0", name: "ROLE_COMPANY_ADMIN", label: "Company Administrator", type: "COMPANY"} 1 : {id: "6235e566-b668-4780-ba9a-72e7f9e5a067", name: "ROLE_PROJECT_MANAGER", label: "Project Manager", type: "COMPANY"} — John Theoden
– John Theoden, Commented Oct 24, 2017 at 15:47
As for userRoles ...response in handleSucess is giving me array ... : id : "cb53681a-608f-4ea5-a9a4-3826b30684b0" label : "Company Administrator" name : "ROLE_COMPANY_ADMIN" type : "COMPANY" — John Theoden
– John Theoden, Commented Oct 24, 2017 at 15:56

Mohamed Ali RACHID · Accepted Answer · 2017-10-24 16:41:43Z

1

what you have to do is to check if the role.name is one of the names of userRoles :

in your .tsfile , map the userRoles to their names :

userRolesNames = [];
handleSucess(response) {
            this.userRoles = response;
            this.userRolesNames = response.map(userRole => userRole.name);
}

in your HTML :

<input class="roles-li" type="checkbox" [checked]="userRolesNames.indexOf(role.name)>-1"  name="role">{{ role.label }}

Hope it helps :)

edited Oct 24, 2017 at 16:41

answered Oct 24, 2017 at 16:01

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

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

4 Comments

John Theoden Over a year ago

It drops me an error ...think you can figure it out? [ERROR ->][checked]="userRoles.map(userRole => userRole.name ).indexOf(role.name)>-1" [(ngModel)]="role.id" nam")

Mohamed Ali RACHID Over a year ago

try to delete [(ngModel)]="role.id"

Mohamed Ali RACHID Over a year ago

can show the whole error , and please verify your html code if it contains a syntaxic error , thanks :)

Mohamed Ali RACHID Over a year ago

check my answer now :)

Sai Chander · Accepted Answer · 2017-10-24 15:30:02Z

0

You can use [checked] directive in your input. [checked]="userRoles.indexOf(role.id)>-1"

answered Oct 24, 2017 at 15:30

Sai Chander

9891 gold badge8 silver badges18 bronze badges

1 Comment

John Theoden Over a year ago

Nothing is happening ...Every time when i open popup for list, all roles are checked... could be something else?

Collectives™ on Stack Overflow

Checkbox array show item checked in list

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related