Sprawdź dokładnie działanie tego mapowania dla this.items.
const formRows = this.items.map(item => ({
name: this.addInvoiceF['name'].value || '',
count: this.addInvoiceF['count'].value || '',
price: this.addInvoiceF['price'].value || ''
}));
Mapujesz obiekt item, który to wygląda troche inaczej niż przekazany tutaj, gdyż tablica item, zawiera obiekt, którego kluczem jest form: a wartościa jest FormGroup u Ciebie
new FormGroup({
name: new FormControl('', Validators.required),
count: new FormControl('', Validators.required),
price: new FormControl('', Validators.required)
}
Idąc tym tokiem myślenia: Zwrócone przez to mapowanie będą trzy wartości: name, count i price, każda z nich to wartość pola formularza lub pusty łańcuch, jeśli pole jest puste, w tym wypadku otrzymasz tablicę z nowymi obiektami, z których każdy będzie zawierał te trzy wartości.
Jeśli używasz tego samego mapowania dla wielu elementów, dla przypadku, który umieściłeś wcześniej, to tak, dane będą się duplikować dla każdego elementu mapowanego.
Kazdy element, zawsze otrzymuje to samo praktycznie ... wartośc dla this.addInvoiceF['klucz'];
this.addInvoiceF['name']
Więc jeśli tablica ITEMS - ma 3 elementy aktualnie, to wszystkie poprzednie elementy podczas addData() funkcji będą otrzymywać wartości tego samego formularza this.addInvoiceF
Wydaje mi się ,że możesz to zrobić zmieniając nie co mapowanie, na wykorzystanie indeksu
this.items.map((item, index) => ({
name: this.items[index].form.controls.name.value || '',
count: this.items[index].form.controls.count.value || '',
price: this.items[index].form.controls.price.value || ''
}));
wtedy uzyskasz odpowiedni formularz dla każdego elementu, dzięki czemu każdy element nowej tablicy będzie zawierał inne wartości, które są aktualnie wprowadzone w polach formularza.
Tylko musisz w takim razie jakos dostosować this.items[index - do formularza który aktualnie masz this.addInvoiceF, albo aktualizować TYLKO OSTATNI element z tablicy items, a nie wszystkie tymi samymi danymi