Angular 5 HttpClient Post List to Web Api - always null? - list

Question

The setup is Angular 5 and .net core Web Api. At the controller, model binding always results in null while trying to bind to a complex object.
Code is provided below.
This example is adapted from another SO answer . but its not working for me.
Controller:
[Route("demopost1")]
[HttpPost]
public async Task < IntResultEntity > DemoPostList1([FromBody]DemoPostViewModel payload)
{
return await Task.FromResult(new IntResultEntity { Result = 0 });
}
Models:
public class DemoPostModel {
public string RelationType { get; set; }
public int Weight { get; set; }
}
public class DemoPostViewModel {
public IList<DemoPostModel> SubUnits { get; set; }
}
Client side:
export class DemoPostComponent implements OnInit {
constructor(private demoPostSvc: DemoPostService,
private fb: FormBuilder) { }
demoData: any[]
demoPostForm: FormGroup
submitDemoPost1(form: FormGroup) {
let formModel = form.value;
const payload = {
'subUnits': [
formModel.demoFormArray.map(element => ({
'relationType': element.relationType,
'weight': element.weight
}))
]
};
this.demoPostSvc.demoPost1(payload)
.subscribe(data => {
console.log("Post success.");
}, error => {
console.log("Post failed.");
});
}
ngOnInit() {
this.demoData = [
{ 'relationType': 1, 'weight': 2 },
{ 'relationType': 3, 'weight': 4 },
];
this.demoPostForm = this.fb.group({
demoFormArray: this.populateForm()
});
}
populateForm(): FormArray {
let formFields: any[] = [];
this.demoData.forEach(element => {
formFields.push(this.fb.group({
'relationType': element.relationType,
'weight': element.weight
}));
});
return this.fb.array(formFields);
}
}

Answer 1

Modify DemoPostViewModel to include a constructor like below:
public class DemoPostViewModel
{
public DemoPostViewModel()
{
SubUnits = new List<DemoPostModel>();
}
public IList<DemoPostModel> SubUnits { get; set; }
}