从角度中的所有选中的复选框中获取值 [英] Get value from all checked checkbox in angular

问题描述

我正在使用 angular 创建测验应用程序，我有这样的代码

i'm creating quiz app using angular and i have code like this

  ngOnInit() {
    this.myForm = this.fb.group({
      lessonCode: "test",
      answer: this.fb.array([])
    });
  }
  
  onChange(email: string, code: string, isChecked: boolean) {
    const emailFormArray = <FormArray>this.myForm.controls.answer;

    if (isChecked) {
      let array = new FormGroup({
        questionCode: new FormControl(email),
        emailCode: new FormArray([
          new FormControl(code)
        ]),
      });
      emailFormArray.push(array);
    } else {
      let index = emailFormArray.controls.findIndex(x => x.value == email);
      emailFormArray.removeAt(index);
    }
  }

生成这样的数组

Form values: {
  "lessonCode": "test",
  "answer": [
    {
      "questionCode": "pertanyaan2",
      "emailCode": [
        "option2"
      ]
    },
    {
      "questionCode": "pertanyaan2",
      "emailCode": [
        "option1"
      ]
    }
  ]
}

但我真正需要的是这样

Form values: {
  "lessonCode": "test",
  "answer": [
    {
      "questionCode": "pertanyaan2",
      "emailCode": {
        "option2",
        "option1"
      }
    }
  ]
}

我怎样才能做到这一点?任何想法都会非常有帮助

how can i achieve that? any thoughts would be very helpful

我在这里复制最少https://stackblitz.com/edit/angular-ca1jin?file=src%2Fapp%2Fapp.component.ts

推荐答案

你需要做的是将 emailCode 添加为 FormArray 而不是 FormControl，这样你就可以检查questionCode是否已经存在，如果存在，你可以在emailCode中附加你选中的选项.

What you need to do is to add emailCode as FormArray instead of FormControl, this way you will be able to check whether the questionCode already exists, and if yes, you can append to emailCode the option you checked.

唯一需要改变的是你的 onChange 方法

The only things to change are on your onChange method

首先你array变量，你需要添加FormArray而不是FormControl

First you array variable, you need to add FormArray instead of FormControl

let array = new FormGroup({
  questionCode: new FormControl(email),
  emailCode: new FormArray([])
});

然后为您选中的选项创建一个 FormControl

Then create a FormControl for your checked option

let codeOption = new FormControl(code)

最后，在您的 if 条件中，检查 questionCode 是否已经存在以将您的 formControl 附加到它，或者创建一个新对象.

And finally, in your if condition, check if the questionCode already exist to just append your formControl to it, or to create a new object.

if (isChecked) {
  if (emailFormArray.controls.some(obj => obj.get('questionCode').value == email)){
    (<FormArray>emailFormArray.controls.find(obj => obj.get('questionCode').value == email).get('emailCode')).push(codeOption);
  }else{
    (<FormArray>array.get('emailCode')).push(codeOption)
    emailFormArray.push(array)
  }
}

为了更清楚，我修改了你的 stackblitz 满足您的需求

To be more clear I have modified your stackblitz to fit with your needs

我没有修改 else 条件以删除 FormArray 上的选项，但您只需要复制 if 条件即可获得emailCode 的 FormArray 上 code 元素的索引.

I have not modified the else condition to remove the options on your FormArray but you just need to copy the if condition to get the index of the code element on your FormArray of emailCode.

这篇关于从角度中的所有选中的复选框中获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！