在 angular 中获取多个复选框值作为数组

Question

我正在尝试从这里的多个复选框中获取值https://stackblitz.com/edit/angular-ivy-uahtjx i try this approach but didn't with for me https://stackblitz.com/edit/quiz-answer-value我认为这是因为JSON架构不同，第一个是数组，第二个是对象。

我这样设置我的 html

<div *ngFor="let option of form.options">
  <label><input (change)="onChange(i,j, form.code,check.checked)" #check 
  [value]="answers[i].value.forms[j].answer.toString().indexOf(form.code)>=0" formControlName="answer" type="checkbox">{{option}}</label>
</div>

对于我这样的更改功能

onChange(indexi: number, indexj: number, code: string, isChecked: boolean) {
  const control = this.answerArray.at(indexi).get("forms")['controls'][indexj].get('answer');
  console.log(control);
}

有人可以帮我吗？

Answer 1

您的代码中有几个错误。

您指出的最后一个 stackblitz（来自）是一种“富有想象力”的方式来管理一系列 check-boxes 以提供存储字符串数组的 formControl。这个想法是输入有 [checked] 和 (change)，但是 NOT formControlName（这是因为起初 check-boxes 被“选中”） . formControl 在表单中没有输入。是的，formControl 存在，但没有输入。

check-box 的 [checked] 是一个函数，指示“选项”是否包含在控件的值中（使用 indexOf）

(change) 有参数、用于本地化 formControl 的索引、“选项”的值以及是否选中。

一个more simple stackblitz来展示这个概念：

<!--see that "answer" has no input, it's only a variable in .ts-->
<div *ngFor="let option of options">
<input #check type="checkbox"
  [checked]="answer.indexOf(option)>=0"
  (change)="onChange(option,check.checked)"
>
{{option}}
</div>

  answer=["check 2"]
  options=["check 1","check 2","check3"]
  onChange(option:string,checked:boolean)
  {
     if (checked && this.answer.indexOf(option)<0)
         this.answer=[...this.answer,option]
         .sort((a,b)=>this.options.indexOf(a)>this.options.indexOf(b)?1:-1)
    if (!checked)
          this.answer=this.answer.filter(x=>x!=option)
  }

嗯，在你的代码中

1.-更改表格（请参阅代码中的注释）

    <div *ngIf="form.type == 'checkbox'">
        <p>{{form.title}}</p>
        <div *ngFor="let option of form.options">
           <!--in your code WRONG (change)="onChange(i,j, form.code,check.checked)" -->
           <!-- see that we need send the "option", not the form.code-->
            <label><input #check (change)="onChange(i,j, option,check.checked)"
           <!--use checked, not value, and remove the "toString"-->
             [checked]="answers[i].value.forms[j].answer.indexOf(option)>=0"
              <!--see that we has no formControlName="answer" -->
              type="checkbox">{{option}}</label>
        </div>
    </div>

onChange 函数，只是如果checked=true 添加“代码”，如果checked=false 删除“代码”。好吧，有一个困难是“排序”响应。为了对响应进行排序，我们比较“选项”中的 indexOf 值

我使用辅助变量“选项”来获取“选项”

2.-通过

改变你的onChange函数

  onChange(indexi: number, indexj: number, code: string, isChecked: boolean) {
    const control = this.answerArray.at(indexi).get("forms")["controls"][indexj]
      .controls.answer;
    
    const options=this.listFormField[indexi].sectionItems[indexj].options
    //options will be, eg. ["check 1","check 2","check 3"]
    if (isChecked && control.value.indexOf(code) < 0)
      control.setValue(
        [...control.value, code].sort((a: string, b: string) =>
          options.indexOf(a) >options.indexOf(b)
            ? 1
            : -1
        )
      );

    if (!isChecked && control.value.indexOf(code) >= 0)
      control.setValue(control.value.filter(x => x != code));
  }

注意：您需要修改代码，实际上，当您创建表单时，您所有的“答案”都是数组（只需要将它们是 check-boxs 的答案的“答案”数组)

已更新 为了避免 answer 为 null 时出现错误，我们可以或避免在创建表单时出现错误，或者，另一种选择是，更改 checked 中的代码 as

[checked]="(answers[i].value.forms[j].answer || []).indexOf(option)>=0"

路径值我们可以，如果只是一个元素，例如

const i=0
const j=1
this.response.get('answers.'+i+'.forms.'+j+'.answer')
     .patchValue(["check 1","check 2"])

是的，要获得“答案”，我们可以使用索引“获取”。也许这可以理解，因为当我们使用 formGroup 的 formArray 时，我们写 [formGroupName]="i"。如果我们想在 FormGroup 上创建 pathValue，我们需要考虑，如果我们在数组上创建 pathValue，pathValue 不会将元素添加到 formArray，因此如果我们发送更多元素，则不会添加。此外，如果我们发送较少的元素，pathValue，删除元素

考虑到这一点，我们也可以制作，例如

this.response.get('answers.'+i+'.forms')
     .patchValue(
        [
          {answer:"radio 2"},
          {answer:["check 1","check 2"]},
          {answer:"text input"},
          {answer:"text area"},
          {answer:["check 6"]},
         ]
        )

在 angular 中获取多个复选框值作为数组

get multiple checkbox value as an array in angular

json

angular

angular-reactive-forms

angular-forms