Я пытаюсь вычислить общее или другое значение на основе определенного значения в FormArray.
Я обнаружил, что при подписке на valueChanges
и попытке передать весь массив чему-то вроде reduce
«новое значение» отсутствует в родительской FormGroup.
Образец:
this.frm.get('arr')['controls'][i].valueChanges
.subscribe((newVal) => {
this.frm.get('total').patchValue(
this.frm.get('arr').value.reduce((acc, curr) => {
return acc + curr.v;
}, 0)
)
});
Если arr
имеет значения [0, 1, 2, 3, 4]
и я изменяю первое значение на 1
, я все равно получаю 10
вместо 11
.
this.frm.get('arr').value
показывает все начальные значения, а не обновленные значения.
Я новичок в реактивных формах, поэтому уверен, что мне просто не хватает чего-то фундаментального.
ОБНОВЛЕНИЕ (есть решение, но я все еще не понимаю):
Мне очень хотелось бы знать, почему я не могу подписаться на изменения всего массива, как предлагала Элисео.
Меня также интересует, почему существует такая разница между тем, где я использую .value
- Если вся суть реактивных форм должна управляться моделью, а затем передавать frm.value
в вашу функцию отправки, то почему .value
так непоследовательно во всей иерархии форм?
ОБНОВЛЕНИЕ 2
Обновленное решение StackBlitz под руководством Элисео после его обновления
Я нашел решение, которое меня вполне устраивает. Он нигде не использует controls
и кажется очень чистым. Предложенный Элисео подход подтолкнул меня попробовать это. Я считаю, что важно выполнить приведение к FormArray
и выполнить на нем любые push
. Это сохраняет привязку поля parent
к остальной части вашего FormGroup
или FormArray
, поэтому оно остается включенным в событие valueChanges
.
Теперь я считаю, что использование controls
- это анти-шаблон для Angular Reactive Forms, но мне нужно найти больше указаний по этой теме.