Почему formArray превращается в formControl в angular для реактивной формы при циклическом повторении более одного раза? Как мне остановить это или принудительно вернуть formArray? - PullRequest
Новая
       90

Почему formArray превращается в formControl в angular для реактивной формы при циклическом повторении более одного раза? Как мне остановить это или принудительно вернуть formArray?

1 голос
/ 10 февраля 2020

Фон

Данные представляют собой два массива объектов внутри массива объектов внутри другого массива объектов и не могут быть изменены. Эти данные собираются через реактивную форму, и каждый массив может иметь неизвестную длину. Я хочу не только собрать информацию через форму, но и показать, что уже введено, и позволить пользователю редактировать ее через форму.

Подтверждено, что это происходит в Angular8 Мой проект и Angular9 stackBlitz.

Проблема

Ожидается

Когда я выбираю formArray для загрузки существующих данных, я ожидаю, что он будет возвращать formArray каждый итерации, поэтому я могу использовать функции массива, такие как .pu sh, чтобы перебрать существующие данные и загрузить их в форму, чтобы показать пользователю. Экземпляр возвращает formArray, в любое время после этого он возвращается как formControl и не может использовать функции массива для манипулирования отображаемыми данными.

Код

Я использую компонент внутри другого, поэтому показ всего применимого кода, вероятно, будет очень длинным. Я включил stackBlitz, который регистрирует, что происходит, когда я пытаюсь выбрать formArray, о котором идет речь.

https://stackblitz.com/edit/reactive-form-array-issue

Некоторый код, который поможет контексту сразу.

Настройка данных (видно из: stepper-form-component.ts, начиная со строки 112 с данными) 

   item_types: [
        {
          group: string,
          is_active: boolean,
          item_fees: [
            {
              fee: string,
              description: string
            },
          ],
          item_options_settings: [
            {
              option_name: string,
              option_for: string
              },
          ]
        },
      ],
      classifications: [
        {
          name: string
        },
      ]
    };

Настройка формы (видно из: stepper -form-component.ts, стартовая строка 46) 

  buildForm() {
    this.form = this.fb.group({
      item_types: this.fb.array([
        this.fb.group({
          group: new FormControl(null, [Validators.required]),
          is_active: new FormControl(null, [Validators.required]),
          item_fees: this.fb.array([
            this.fb.group({
              fee: new FormControl(null, [Validators.required]),
              description: new FormControl(null, [Validators.required])
            })
          ]),
          item_options_settings: this.fb.array([
            this.fb.group({
              option_name: new FormControl(null, [Validators.required]),
              option_for: new FormControl(null, [Validators.required])
            })
          ])
        })
      ]),
      classifications: this.fb.array([])
    });
    this.getData();
  }

выбор массива и попытка загрузить в него данные (см .: item-Speci c -settings, стартовая строка 65) 

  loadData() {
    // REVIEW: for some reason both fees and options the first is formarray the following are formcontrols
    console.log(
      `...control.item_fees for index of ${this.index}`,
      this.itemSpecificSettingFormGroup.controls[this.index].controls.item_fees
    );
    const feesArray = this.itemSpecificSettingFormGroup.controls[this.index]
      .controls.item_fees as FormArray;
    this.item.item_fees.forEach(fee => {
      const newGroup = this.fb.group({
        fee: [fee.fee, [Validators.required]],
        description: [fee.description, [Validators.required]]
      });
      feesArray.insert(feesArray.length, newGroup);
    });

    const optionsArray = this.itemSpecificSettingFormGroup.controls[this.index]
      .controls.item_options_settings as FormArray;
    this.item.item_options_settings.forEach(option => {
      const newGroup = this.fb.group({
        option_name: [option.option_name, [Validators.required]],
        option_for: [option.option_for, [Validators.required]]
      });
      optionsArray.insert(optionsArray.length, newGroup);
    });
  }

Я пытался

Сначала я посмотрел на этот похожий вопрос formarray-returning-as-formcontrol

  • Для первого ответа с использованием this.itemSpecificSettingFormGroup.controls[this.index].get('item_fees') все равно получается formArray первая итерация и formControl каждый раз после.

  • Для второго ответа я уже знаю идентификатор, к которому он не применяется.

Меня также направили на Chrome 80 вводит angular критическую ошибку

  • Но моя ситуация не происходит с той же частотой, с которой сталкиваются другие: сначала ошибка, а затем точная или случайная. Моя проблема возникает после первой итерации и все еще существует в Firefox, которая, насколько мне известно, не связана с хромом.

Вопросы

1 ) Почему это происходит, почему первый результат будет formArray, а следующие - formControls?

2) Как заставить его распознавать formArray для отображения правильных данных?

...