以角度數組的形式獲取多個復選框值

Question

我正在嘗試從這里的多個復選框中獲取值https://stackblitz.com/edit/angular-ivy-uahtjx我嘗試了這種方法，但對我來說卻沒有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（從這個 SO中消失）是一種“富有想象力的”方式來管理一系列復選框以提供存儲字符串數組的 formControl。 這個想法是輸入有[checked]和(change) ，但不是formControlName （這是因為起初復選框變成了“選中”）。 formControl 在表單中沒有輸入。 是的，formControl 存在，但沒有輸入。

[checked]的[checked]是一個函數，指示“選項”是否包含在控件的值中（使用 indexOf）

(change)作為參數，索引 - 本地化 formControl -，“選項”的值以及是否檢查。

一個更簡單的 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));
  }

注意：您需要修改代碼，實際上，當您創建表單時，您所有的“答案”都是數組（只需要排列它們是復選框的答案的“答案”）

更新為了避免在 answer 為空時出現錯誤，我們可以或避免在創建表單時，或者，另一種選擇，將代碼更改為

[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"])

是的，要獲得“答案”，我們可以使用索引使用“get”。 Perhafs 這很容易理解，因為當我們使用 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"]},
         ]
        )