没有在 Angular Reactive Forms 中获取多个复选框的值答案

【问题标题】：Not getting the values of multiple check boxes in Angular Reactive Forms没有在 Angular Reactive Forms 中获取多个复选框的值
【发布时间】：2019-06-22 21:11:05
【问题描述】：

我正在创建 Angular Reactive 表单，并在那里添加了多个复选框。我想将用户选择的值放入一个数组中。表单是从 JSON 数据生成的。当用户单击一个复选框时，它会添加到数组中。当用户单击另一个复选框时，它仅显示最新的复选框，而先前选择的值不存在。这是我尝试过的。

https://stackblitz.com/edit/github-ejwhnx （您可以检查 stackblitz 控制台到选定的值）

感谢是否有人可以提供支持以解决此问题。

【问题讨论】：

你偷看 DOM 了吗？看起来你的 for 循环没有创建唯一的输入。
@coderaizer，我想你是在屋顶上建房子。当我们想使用 ReactiveForms 时，我们必须清楚两件事：1.-表单，2.-如何显示它。真的你没有表格（只要写在你的 form-main-component.html 中）{{quizForm?.value|json}}
@Eliseo - 感谢您的友好回复。我是响应式表单的新手。这就是我得到的 { "undefined": null } 。你能帮忙吗
@David Aguirre- 我尝试添加唯一值，但遇到了同样的问题

标签： angular angular-reactive-forms reactive-forms

【解决方案1】：

编码器。你必须清楚你想要得到什么。让我举个例子：

假设你想获得一些类似的东西（记住这是一个例子：你决定了你想要获得什么）

data=[
{id:1004,answer:[100401,100402]},
{id:1005,answer:[100503]},
{id:1006,answer:[100603,100606]}
]

其他例子只能得到[100401,100402,100503,100603,100606]甚至是字符串“100401,100402,100503,100606,100606”

嗯，事情真的没那么容易。当我们有“checkBox”时，复选框只有两个可能的值：true或false，所以我们的对象变成了一些类似

data=[
{id:1004,answer:[true,true]},
{id:1005,answer:[false,false,true]},
{id:1006,answer:[false,false,true,false,false,true]}
]

您可以在link 中看到一个讨论（最后有一个自定义的 FormControl 来管理复选框列表）

记住同样的例子，在你的组件中在构造函数中注入 formBuilder

constructor(private fb:FormBuilder){}

并在 ngOnInit() 中创建表单。首先是数据-暂时忘记json-

  ngOnInit() {
    this.myForm = new FormArray([
      this.fb.group({
        id: 1004,
        answers: new FormArray([new FormControl(true), new FormControl(true)])
      }),
      this.fb.group({
        id: 1005,
        answers: new FormArray([new FormControl(false),new FormControl(false),new FormControl(true)])
      }),
    ])
  }

和我们的 .html 一样

  <div *ngFor="let question of myForm.controls" >
    <div [formGroup]="question">
      <input formControlName="id">
      <div formArrayName="answers">
        <div *ngFor="let item of question.get('answers').controls;let i=index">
            <input type="checkbox" [formControlName]="i">
        </div>
      </div>
    </div>
  </div>
{{myForm?.value|json}}

现在是思考 .json 文件的时候了。看到我们的 .json 可以创建表单并在我们的表单中显示选项

  ngOnInit() {
    let group:FormGroup[]=[]
    this.JSON.forEach(x=>{
       group.push(this.fb.group({
         id:x.id,
         answers:new FormArray(x.answers.map(x=>new FormControl(false)))
       }))
    })
    this.myForm = new FormArray(group)
  }

并“装饰”我们的 .html 以显示选项

  <div *ngFor="let question of myForm.controls;let j=index" >
    {{JSON[j].question}}
    <div [formGroup]="question">
      <input formControlName="id">
      <div formArrayName="answers">
        <div *ngFor="let item of question.get('answers').controls;let i=index">
            <input type="checkbox" [formControlName]="i">{{JSON[j].answers[i].answer}}
        </div>
      </div>
    </div>
  </div>

好吧，你有组件来显示表单，试着看看“什么是什么”来调整@Inputs()

【讨论】：