Angular

Question

我使用 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.

Answer 1

您FormGroup定义错误。您的 FormGroup 应该有 FormArray 个 FormGroup。在每个 FormGroup 中，应该有两个 FormControl 用于 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);
}

这就是您将如何在模板中使用它：

<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>

这里有一个 Sample StackBlitz 供您参考。

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

Angular - FormBuilder, how to group multiple Form Controls

javascript

forms

formbuilder

formgroups