Angular-FormBuilder，如何對多個表單控件進行分組

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對成績/分數來實現我所描述的語法是什么，而且重要的是，在具有所有這些成績/分數對的最終數組中，我只有未定義的值，所以如果在我的表單中，用戶僅填寫一對成績/分數，那么我的myArray.length將為1。

Answer 1

您定義的FormGroup錯誤。 您的FormGroup應該具有FormArray的FormGroup 。 在每個FormGroup的內部，應該有兩個用於grade和value FormControl 。

將您的表單更改為此：

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>

這是供您參考的示例StackBlitz 。