Pass FormArray[] Data from Angular to Backend and Save to SQL Table

I’ve created a component in Angular that contains a table with dynamic data. To manage this table as a form, I used a FormArray[] inside a FormGroup.

Here’s my current Save() method:

Save() {
if (this.form.invalid) {
this.toastr.warning('Lütfen formu eksiksiz doldurunuz.');
return;
}
const formData = this.form.getRawValue();
console.log(formData);
this.isLoadingSave = true;
this.service.Add(formData).subscribe((response) => {
this.isLoadingSave = false;
this.toastr.success('Kayıt Başarılı.');
this.form.reset();
this.rows.clear();
}, (err) => {
this.isLoadingSave = false;
this.toastr.error(GetErrorMessage(err), 'Hata', {
enableHtml: true,
closeButton: true
});
});
}



However, when I try to use this method, I get the following error in the console:

(anonymous) @ dnmk-score-board-tas…pe.component.ts:227
(anonymous) @ dnmk-score-board-tas…pe.component.ts:218
Save @ dnmk-score-board-tas…pe.component.ts:215
DnmkScoreBoardTaskTypeComponent_form_15_button_29_Template_button_click_0_listener @ dnmk-score-board-tas….component.html:106
Zone - HTMLButtonElement.addEventListener:click
DnmkScoreBoardTaskTypeComponent_form_15_button_29_Template @ dnmk-score-board-tas….component.html:106
DnmkScoreBoardTaskTypeComponent_form_15_Template @ dnmk-score-board-tas….component.html:106
XMLHttpRequest.send
getTasks @ dnmk-score-board-tas…pe.component.ts:160
ngOnInit @ dnmk-score-board-tas…ype.component.ts:73
Promise.then
(anonymous) @ main.ts:11



My model for the related component is like:

export interface Dnmk_ScoreBoardTaskTypeDefinition {

taskTypeId: number;
definitionId: number;
score: number;
itemId: number;
scale : number;
itemnmk_ScoreBoardItems;
}



My SQL table has the following columns:

Id TypeId TaskId CreateUserId CreateDate UpdateUserId UpdateDate

I suspect the structure generated by getRawValue() does not match what the backend is expecting.

How should I modify my Save() method or form structure so that it correctly maps to the expected backend model?

I have tried to define item in my model as optional but it did not worked at all.

Continue reading...