Dynamic FormArray for checkboxes

Question

I am creating a form in angular2 and typescript. I am trying to add a list of checkboxes dynamically and it does not work for me, where is my error?

Template Code:

<div formArrayName="categories"> <div class="form-group" *ngFor="let category of updateDetailsForm.controls.categories.controls; let i = index"> <label> <input type="checkbox" formControlName="{‌{i}}"> {‌{category.name}} </label> </div> </div> 

Typescript Code:

 updateDetailsForm: FormGroup; private categories : Category[] = [] constructor(private router: Router, private ss : SearchService, private formBuilder: FormBuilder) { this.initForm() // before the categories loaded this.ss.getAllCategories().subscribe( data => { this.categories = data this.initForm() // refresh the form with categories } ) } initForm() { let allCategories: FormArray = new FormArray([]); for (let i = 0; i < this.categories.length; i++) { allCategories.push( new FormGroup({ 'name': new FormControl([this.categories[i].categoryName]) }) ) } this.updateDetailsForm = this.formBuilder.group({ 'image' : [''], 'categories': allCategories }) } 

This is my user interface result, and I get the following error:

"inline template: 17:33 called: control.registerOnChange is not a function"

The number of checkboxes is correct, but the text is missing, and I can’t update the form result with the user’s choice.

• What does the error mean?

• How can I insert the correct text after this checkbox?

• How to update user selection in form value?

Answer 1

You have created your form model in such a way that we need to access each FormGroup that you insert into the array, and then access the named control inside:

 <span formGroupName="{{i}}"> <input type="checkbox" formControlName="{{category.name}}"> {{category.name}} </span> 

We also need to configure how we push the values ​​so that the name is given uniquely, and not always as "name" :

 let fg = new FormGroup({}); fg.addControl(this.categories[i].name, new FormControl(false)) allCategories.push(fg) 

Here's a plunker to demonstrate it: http://plnkr.co/edit/OTiqwr1oCb8uEThQyDHx?p=preview

Answer 2

I think that due to the same categories name of your component variable and form group control, you get an error. Check this out by making a change to your component below and generating the HTML:

You can check the FormArrayName directive for more help.

//Component

 updateDetailsForm: FormGroup; private allCategories : Category[] = [] constructor(private router: Router, private ss : SearchService, private formBuilder: FormBuilder) { this.initForm() // before the categories loaded this.ss.getAllCategories().subscribe( data => { this.allCategories = data this.initForm() // refresh the form with categories } ) } initForm() { let allCategories: FormArray = new FormArray([]); for (let i = 0; i < this.allCategories.length; i++) { allCategories.push(new FormControl()); } this.updateDetailsForm = this.formBuilder.group({ 'image' : [''], 'categories': allCategories }) } 

// HTML form

 <div formArrayName="categories"> <div class="form-group" *ngFor="let category of categories.controls; let i = index"> <label> <input type="checkbox" formControlName="i"> {‌{allCategories[i].name}} </label> </div> </div>