Angular не удается найти элемент управления с помощью FormGroup при использовании массива FormGroups

#angular #angular-reactive-forms

#angular #angular-reactive-forms

Вопрос:

Моя цель — создать динамические формы, которые я разрешаю создавать своим пользователям. Они создают файл JSON, который описывает форму, которую я затем загружаю. Эти формы могут быть довольно сложными (включая внешние ссылки для загрузки пар ключ-значение и т.д.). Для форматирования я решил загрузить поля из файла JSON сверху вниз, т. Е. По одному полю на строку. Если вы хотите иметь более одного поля, вы создаете массив — затем они выравниваются по горизонтали.

Я посмотрел на https://github.com/hamzahamidi/ajsf но решил отказаться от этого, поскольку, похоже, много накладных расходов, и я не мог обновлять данные формы на лету (только при использовании данных в качестве макета формы).).

Я начал с этого примера:https://angular.io/guide/dynamic-form. Мой код работает для файла JSON без массивов, хотя мне нужно было изменить функцию toFormGroup, чтобы сначала создать массив элементов управления, ПРЕЖДЕ чем добавлять их в группу, иначе у меня была страшная ошибка «Не удается найти элемент управления с помощью path». Похоже, это проблема с условиями синхронизации / гонки, поскольку у меня этого не было, когда я не загружался из файлов (т. Е. Без обещания). Проверьте функцию toFormGroup, чтобы увидеть, что я сделал.

Сейчас я пытаюсь загрузить массив… AFAIK, я все делаю правильно, но я получаю ошибку:

ОШИБКА Ошибка: не удается найти элемент управления с помощью path: ‘0 -> фамилия’

Я создал здесь урезанный пример:

https://stackblitz.com/edit/angular-ivy-knft2z?file=src/app/services/question .service.ts

ошибка отмечена в коде конструктора app.component.ts => если я передаю простой файл json, все в порядке, если я передаю код с массивом, у меня есть массив в переменной DynamicForm, но я получаю указанную выше ошибку в консоли. Просто измените параметр здесь на «простой», и код заработает, т. Е. поля сверху вниз.

Любая помощь здесь была бы отличной, поскольку я новичок в angular / reactive forms и не могу найти свою ошибку уже 2 дня!

Спасибо

Комментарии:

1. Hey @Ursus Schneider. Вот пример динамических форм. stackblitz.com/edit /…

2. Привет @OwaisAhmedKhan. Спасибо за пример — к сожалению, это не решает мою проблему, поскольку вы просто используете плоский список. Это у меня работает, если вы посмотрите на мой пример кода. Моя проблема в том, что как только я передаю массив записей компоненту, я получаю описанную ошибку.