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

Вместо отображения каждого отдельного значения в новый массив,Я видел, что есть FormArray в FormBuilder, я просто не могу реализовать его корректно.

Какой будет правильный синтаксис для достижения того, что я описал, имея ровно 4 парыоценка / оценка, а также важно, чтобы в моем окончательном массиве со всеми этими оценками / парами у меня были только значения, которые не определены, поэтому, если в моей форме пользователь заполняет только одну оценку / оценку пары, то моя 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>

Вот Образец StackBlitz для вашей ссылки.