Question

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

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

感谢任何人都可以提供支持来解决此问题。

Answer 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（）

在Angular反应性表单中未获取多个复选框的值

1 个答案: