Angular Checkbox List not working

Question

I want to create a checkbox list as shown here. I want to display a checkbox and name and on submit i want to get all selected value. I am not able to display the name and set selected value on checkbox.

[] Jim 
[x] Mondo
[] Ann

I have created this code:

  <div *ngIf="formSubmitted && teamForm.pristine" class = "submitted"> Form submitted successfully. </div>
<div class="team">
  <form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
    <div class="all-emp">
      <b> Employees in Team :{{empFormArray.controls.length}}</b><br><br>
      <div formArrayName="empFormArray"> 
        <div *ngFor = "let emp of empFormArray.controls; let idx = index" [formGroupName]="idx" class="employee">
          <p> <b>Employee : {{idx + 1}}</b> </p>
            <p>Emp Id : <input type="checkbox" [value]="emp.isSelected"  formControlName="name">{{emp.name}}</p>
        </div>
      </div>

    </div> <br/>
 <button [disabled]="teamForm.invalid">SUBMIT</button>

This my component class. Please check my employee method:

export class CheckboxlistComponent implements OnInit {

  teamForm:FormGroup;
  formSubmitted = false;

  constructor(
       private formBuilder:FormBuilder) { 
  }

  ngOnInit() {
      this.createTeamForm();
      this.addEmployee('00', true);
      this.addEmployee('99', false);
      this.addEmployee('77', false);
  }

createTeamForm(){
      this.teamForm = this.formBuilder.group({
      empFormArray: this.formBuilder.array([]) 
      }); 
  }
  get empFormArray(): FormArray{
      return this.teamForm.get('empFormArray') as FormArray;
  }

  addEmployee(name, selected){

    let obj = {
       name: name,
      isSelected: selected
    }

    let fg = this.formBuilder.group({
        name: [obj]
      });

      this.empFormArray.push(fg);     
  }

  onFormSubmit() {
      let data = JSON.stringify(this.teamForm.value);
      console.log(data);

    this.formSubmitted = true;
      // this.teamForm.reset();   
  }   
}

AVJT82 · Accepted Answer · 2017-12-30 09:26:19Z

2

You are pushing an Object name containing you name and isSelected to your formArray:

let obj = {
  name: name,
  isSelected: selected
}

let fg = this.formBuilder.group({
  name: [obj] // here!
});

this.empFormArray.push(fg);

What you'd want is to push just the obj as is to the formArray, so:

let fg = this.formBuilder.group({
  name: name,
  isSelected: selected
});

Also you'd want to modify your template and set the formcontrol in the checkbox as isSelected instead of name and also remove [value]. Also notice we need to use controls in template to reach your employee name. So change:

<input type="checkbox" [value]="emp.isSelected" formControlName="name">{{emp.name}}

to:

<input type="checkbox" formControlName="isSelected">{{emp.controls.name.value}}

That should sort out your issues :)

StackBlitz

answered Dec 30, 2017 at 9:26

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

I spent some time but didn't able to figure out how to solve this. You nailed it. Nice solution :)

AVJT82 Over a year ago

@PankajParkar thank you, I have my moments where my brain actually works :P

user2480218 Over a year ago

Thanks for the solutions and it was exactly what I wanted to achieve.

AVJT82 Over a year ago

Great! Glad to hear! :)

Nirav Gandhi · Accepted Answer · 2017-12-30 03:59:19Z

0

I recommend using https://vitalets.github.io/checklist-model/. This makes working with checklists super easy.

answered Dec 30, 2017 at 3:59

Nirav Gandhi

1,9951 gold badge25 silver badges32 bronze badges

2 Comments

Pankaj Parkar Over a year ago

FYI. OP is asking for Angular 2+ version, not angularjs.

Nirav Gandhi Over a year ago

Ok. The accepted answer is more apt in that case. Thanks.

Collectives™ on Stack Overflow

Angular Checkbox List not working

2 Answers 2

StackBlitz

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related