Question

我是新的角度，在我的角度4项目中，我有一个JSON数组，通过它我可以制作一个复选框列表。我无法提交这些动态复选框的值。

我的json数组是： -

    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'
            }
        ]   
    }
]

我的HTML是： -

 <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>

在我的component.ts文件中：

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

请帮助如何管理此类事情。这对我的项目有帮助。

Answer 1

您是否在模块中添加了FormsModule引用？

＆＃13;

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

＆＃13;

要提交表单，您需要一个formsModule。

动态复选框值使用模板驱动形式提交角度4

1 个答案: