Реактивная форма Angular 5 - patchValue с FormArray не работает

У меня есть эта реактивная форма в среде Ionic3, которую мне нужно заполнить данными, которые я получаю из API. Для этого я использую patchValue, так как где-то читал, что он более надежен, чем setValue.

Проблема, с которой я сталкиваюсь, заключается в том, что она не заполняет повторяющиеся поля формы. Чтобы лучше объяснить, я создал этот пример кода.

Я пробовал другие способы, такие как прямое назначение данных соответствующему полю вместо использования цикла for сначала, но это заполняло только 1 набор вместо всех 3.

Может ли кто-нибудь указать, что я делаю неправильно, или предложить лучшее решение?

Спасибо


angular ionic3 angular-reactive-forms formarray
person Aryan    schedule 26.10.2018    source источник
comment
Ваш код работает нормально. Просто ваш метод заполнения создает новые группы форм и заполняет их с помощью patchValue(), но никогда не помещает эти новые группы форм в массив форм.   -  person JB Nizet    schedule 26.10.2018
comment
patchValue() не более надежен. Он делает что-то отличное от setValue(). setValue ожидает полное новое значение (содержащее новое значение для каждого элемента управления формы), тогда как patchValue ожидает частичное новое значение (содержащее новое значение для некоторых элементов управления формы).   -  person JB Nizet    schedule 26.10.2018
comment
Спасибо @JBNizet   -  person Aryan    schedule 26.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

В вашем примере установите цикл for на домашнем компоненте, чтобы он выглядел так:

for(const rooms of resp.room_data){

      const roomNumberControl = this.createRooms();
      (<FormArray>this.informationForm.controls.room_numbers).push
      (roomNumberControl);
      console.log(JSON.stringify(rooms));
    }

Для создания комнат просто нужно иметь некоторые данные в них, но это создаст объект для всех в массиве. Вот как я делал это в прошлом.

person Woot    schedule 26.10.2018
comment
Спасибо, это сработало как шарм, но оставляет первое поле пустым. Можете ли вы сказать мне, как я могу это исправить? stackblitz.com/edit/ionic-c5vapg - person Aryan; 26.10.2018
comment
удалите this.createRooms() из строки 17, когда форма инициализируется, вы заполняете ее vaule - person Woot; 26.10.2018
comment
Так глупо с моей стороны, еще раз большое спасибо. Вы спасли мой день - person Aryan; 26.10.2018
comment
Конечно, рад, что смог помочь. - person Woot; 26.10.2018