can u please send me this code
On Wednesday, August 15, 2018 at 6:01:08 PM UTC+3, Sonant Tone wrote: > > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
