Angular 6 Getting checkbox values

[Sonant Tone]

Hello guys,

I'm struggling with checkbox fields in my form for setting user roles. Basically, I want to achieve a form with roles (each of them in a checkbox). They have to return Array<string> to the Web API.

What I'm trying to achieve is:

- Opening for example http://myweb/users/set-role/4 (editing roles for user ID: 4)

- the form consists of:

       - user_id (number)

       - roles (Array<string>) - checkboxes for each role

- the only visible field in the form should be the roles checkboxes

- the checkbox options are being loaded by a service from the ASP.NET Core MVC Web API (RoleId and RoleName). Basically, once the service gets the information, the checkboxes should be checked/unchecked based on that information. (currently, it works, perhaps not in its best way but still it does).

- the final submit fields are id (number) and roles (Array<string>).

What is the problem?

- The checkboxes checked/unchecked state is determined as intended but on form submit "roles" field doesn't contain the right user choices, it contains "true" or "false" value.

Output example:

id: 4 (user id)

roles: 1, 3, 4 (roles ids)

set-user-roles.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

import { Role } from '../../interfaces/role';
import { User } from '../../interfaces/user';

import { UsersService } from '../../services/users.service';
import { RolesService } from '../../services/roles.service';

@Component({
  selector: 'app-set-user-roles',
  templateUrl: './set-user-roles.component.html',
})
export class SetUserRolesComponent implements OnInit {
  setRoleForm: FormGroup;
  id: number;
  title: string;
  userRoles: Role[];
  user: User;

  constructor(private activatedRouter: ActivatedRoute, private formBuilder: FormBuilder, private usersService: UsersService, private rolesService: RolesService) {
    this.getId();
    this.createForm();
    this.getRoles();
  }

  ngOnInit() {
    if (this.id > 0) {
      this.title = `Changing User Roles for ID: ${this.id}`;

      // Get user roles
      this.usersService.getUserById(this.id).subscribe(result => {
        this.user = result;

        // Patch values manually
        this.setRoleForm.controls.id.setValue(this.user.id);
      }, error => console.error(error));
    }
  }

  getId() {
    if (this.activatedRouter.snapshot.params['id']) {
      this.id = this.activatedRouter.snapshot.params['id'];
    }
  }

  createForm() {
    this.setRoleForm = this.formBuilder.group({
      id: 0,
      roles: [] as Array<string>
    });
  }

  getRoles() {
    this.rolesService.getRoles().subscribe(result => {
      this.userRoles = result;
    }, error => console.error(error));
  }

  isSelected(value: string): boolean {
    if (this.user)
      return this.user.roles.indexOf(value) >= 0;
    else
      return false;
  }
 
  onSubmit() {
  }
}

set-user-roles.component.html

<h1>{{ title }}</h1>

<form [formGroup]='setRoleForm' (ngSubmit)='onSubmit()' novalidate>
  <div class='form-group'>
    <label for='roles'>Roles:</label>
    <div class='checkbox' *ngFor="let role of userRoles">
      <label>
        <input type='checkbox' formControlName='roles' [checked]='isSelected(role.name)' [value]='role.id'> {{ role.name }}
      </label>
    </div>
  </div>
  <div class='form-group'>
    <input type='submit' value='Go' class='btn btn-default'>
  </div>
</form>

<pre>{{ setRoleForm.value | json }}</pre>

Thanks!

[Sander Elias]

Hi Sonant,

I think your question is answered in this article.

If not, build a stackblitz, and I will help you along.

Regards

Sander

[Sonant Tone]

A bit late answer but I managed fixing it, thanks!

[faresz...@gmail.com]

can u please send me this code

[Don Shrout]

Sonant Tone,

I'm sure you meant no ill will but, it is rude to post "I fixed it" with out explaining HOW you fixed it.

If you struggled with it, others struggle with it but you are holding back your help from them.

Please post how you fixed it.