Dynamic checkbox value submit using template driven form angular 4

Question

I am new angular , in my angular 4 project I have a JSON array by which I am making a list of checkboxes. I am unable to submit value of these dynamic checkbox.

My json array is:-

    let chekboxArray = 
[
    {
        section:'Programming Skills',
        choices:[
            {
                name:'C'
                value:'c'
            },

            {
                name:'C++'
                value:'c++'
            },
            {
                name:'Java'
                value:'java'
            }
        ]   
    },
    {
        section:'Interest',
        choices:[
            {
                name:'Movies'
                value:'movies'
            },

            {
                name:'Tv Series'
                value:'tvseries'
            },
            {
                name:'Football'
                value:'football'
            }
        ]   
    }
]

My HTML is:-

 <form #customChoiceform="ngForm" (ngSubmit)="addToCart(customChoiceform);">
    <div *ngFor="let single of chekboxArray">
        <label>{{ single.section }}</label>
        <div *ngFor="let choice of single.choices;let i=index">
            <label>{{ choice.name }}</label>
            <input type="checkbox" [value]="{{ choice.value }}" name="{{ 'choices'+i }}" />
        </div>
    </div>
    <div>
        <button type="submit" />Submit</button>
    </div>
 </form>

In my component.ts file:

addToCart(form:NgForm){
  console.log(form);
}

Please Help How to manage this kind of thing.That will be helpful for my project.

Answer 1

Have you added FormsModule reference in your module?

import { FormsModule } from '@angular/forms'; 
@NgModule({
    imports: [
        FormsModule,
        HttpModule,   
         ]
    })

To submit form you need a formsModule.