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! -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
