Javascript Angular-FormBuilder，如何对多个表单控件进行分组

我使用Formbuilder创建FormGroup：

myForm = this.fb.group(
            {
                title: [""],
                fixed_grade1: [""],
                fixed_value1: [""],
                fixed_grade2: [""],
                fixed_value2: [""],
                fixed_grade3: [""],
                fixed_value3: [""],
                fixed_grade4: [""],
                fixed_value4: [""]
            });

所有

fixed_grade

和

fixed_value

都是输入和下拉列表

我有4对，这是正确的

但现在我想对这些值进行分组，这样我就不必逐个访问控制器中的每个值，每个值都使用

myForm.get（“fixed_grade1”）.value

但我希望所有这些值都分组在一个数组中，如：

myArray: [{grade, value}, [grade, value}...]

因此，我可以通过以下方式访问它们的值：

myArray[0]。grade

我没有将每个值映射到一个新数组，而是看到

FormBuilder

中有一个

FormArray

，我似乎无法正确地实现它

---

要实现我所描述的，正确的语法是什么，正好有4对grade/score，还有一点很重要，就是在所有这些grade/score对的最终数组中，我只有未定义的值，因此如果在我的表单中，用户只填写一对grade/score，然后我的

myArray.length

将是1。

您的

表单组定义错误。您的
FormGroup
应该有
FormArray
的
FormGroup
s。在每个
FormGroup
s中，应该有两个
FormControl
s用于
grade
和
value

将您的表单更改为：

const grades = [
  {grade: 'Grade 1', value: 'Value 1'},
  {grade: 'Grade 2', value: 'Value 2'},
  {grade: 'Grade 3', value: 'Value 3'},
  {grade: 'Grade 4', value: 'Value 4'}
]

myForm = this.fb.group({
  title: [],
  grades: this.fb.array(this.grades.map(grade => this.fb.group({
    grade: [grade.grade],
    value: [grade.value]
  }))),
});

// OR

myForm = this.fb.group({
  title: [],
  grades: this.fb.array(this.grades.map(grade => this.fb.group({
    grade: [],
    value: []
  }))),
});
...
get gradesArray() {
  return (<FormArray>this.myForm.get('grades')).controls;
}
...
getArrayGroupControlByIndex(index) {
  return (<FormArray>this.myForm.get('grades'))
    .at(index);
}

const等级=[
{grade:'grade 1'，value:'value 1'}，
{grade:'grade 2'，value:'value 2'}，
{grade:'grade 3'，value:'value 3'}，
{grade:'grade 4'，value:'value 4'}
]
myForm=this.fb.group({
标题：[]，
grades:this.fb.array（this.grades.map（grade=>this.fb.group({
年级：[年级.年级]，
价值：[等级.价值]
}))),
});
//或
myForm=this.fb.group({
标题：[]，
grades:this.fb.array（this.grades.map（grade=>this.fb.group({
职等：[]，
值：[]
}))),
});
...
获取gradesArray（）{
return（this.myForm.get（'grades'））.controls；
}
...
getArrayGroupControlByIndex（索引）{
return（this.myForm.get（'grades'））
.at（索引）；
}

以下是在模板中使用它的方式：

<form [formGroup]="myForm">
  <input type="text" formControlName="title">
  <br>
  <div formArrayName="grades">
    <div *ngFor="let gradeGroup of gradesArray; let i = index;">
      <div [formGroupName]="i">
        Group {{ i + 1 }}
        <input type="text" formControlName="grade">
        <input type="text" formControlName="value">
      </div>
      <br>
    </div>
  </div>
</form>




群{i+1}



这是给你的参考的一个例子。
好的，我会试试这个，我已经试过了：fixed_pairs:this.fb.array（[this.createPairs（）]），然后是方法createPairs->createPairs（）：FormGroup{返回this.fb.group（{grade:，score:“}）；}但是我遇到了错误，你的方法似乎很清楚，我会尝试一下，让你知道另外一个问题，关于我的form builder之前是如何设置的，在我看来，每个值都有一个formControlName=“fixed_value1”，如果我按照您的方式，我如何在模板中为formBuilder数组的每个值分配一个输入或下拉列表？就是这样，工作非常完美，正是我所需要的！最后一件事，如果对于表单生成器的另一个字段的单个值，我检索的数据如下：myForm.get（“title”）.value，并使用.valueChanges订阅更改，那么我应该如何访问这个新表单数组的特定值？myForm.get（“grades”）[x].grade.value？其中x是我要访问的对象的索引？同时将你的答案标记为正确答案！感谢you@AJ989，请看一下我刚刚添加到答案中的
getArrayGroupControlByIndex
方法。是的，我在stackoverflow上也找到了解决方案。谢谢，我正在尝试找出最后一件事，如何手动设置我刚才使用的其他单个值的值。get（“xx”）.setValue，我正在尝试：（this.myForm.get（'grades'））.at（index.grade.setValue（x）；但它似乎不起作用！