Http POST request Error in Angular ngForm - html

Question

I wanted to add new record to my MSSQL database with my Angular SPA, but when I send the form I got nothing but just error 400 - Bad Request. I think it's only SPA fault, because everything is working just fine when I test it with Postman.
My POST body should look like this:
{
"Nazwa": "String",
"Opis": "Another String",
"Ownerusername": "Another String",
"Ends": "1976-07-28"
}
So I made a simple model in my eventcreator.component.ts:
import { Component, OnInit } from '#angular/core';
import { EventService } from '../_services/evncreator.service';
declare let alertify: any ;
#Component({
selector: 'app-eventcreator',
templateUrl: './eventcreator.component.html',
styleUrls: ['./eventcreator.component.css']
})
// declare let alertify;
export class EventcreatorComponent implements OnInit {
model: any = [];
constructor(private evntservice: EventService) {}
ngOnInit() {}
evnCreate() {
// this.model = JSON.parse(this.model);
this.evntservice.eventCreate(this.model).subscribe(
() => {
alertify.success('Utworzono wydarzenie');
},
error => alertify.error('Wystąpił błąd')
);
console.log(this.model);
}
evnAbort() {
window.location.href = '/';
}
}
This script is using evntservice.component.ts, so I want to attach it too:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '#auth0/angular-jwt';
#Injectable({
// dekorator
providedIn: 'root'
})
export class EventService {
constructor(private http: HttpClient) {}
eventCreate(model: any) {
return this.http.post('http://localhost:5000/api/Events', model);
}
}
My eventcreator.component.html is looking like this:
<form #registerForm="ngForm" (ngSubmit)="evnCreate()">
<div class="content p-3 ml-4 mr-4 bg-white">
<h1 class="display-2 text-dark text-center">Kreator wydarzeń</h1>
</div>
<div class="content">
<div class="content ml-4 mr-4 p-3 bg-warning">
<h1 class="ml-2 mt-4 mb-4 text-center">Nazwa wydarzenia:</h1>
<input
class="form-control mt-3 mb-3 p-lg-4 "
[(ngModel)]="model.Nazwa"
name="Nazwa"
required
/>
<div class="text-break"></div>
<h1 class="ml-2 mt-4 mb-4 text-center">Opis wydarzenia:</h1>
<textarea
class="form-control mt-3 mb-3 p-lg-4"
required
[(ngModel)]="model.Opis"
name="Opis"
></textarea>
<div class="text-break"></div>
<h1 class="ml-2 mt-4 mb-4 text-center">Data wydarzenia:</h1>
<input
type="text"
class="form-control"
required
name="Ends"
[(ngModel)]="model.Ends"
/>
<div class="text-break"></div>
<h1 class="ml-2 mt-4 mb-4 text-center">Organizator:</h1>
<input
class="form-control text-success mt-3 mb-3 p-lg-4 "
required
name="Ownerusername"
[(ngModel)]="model.Ownerusername"
/>
<div class="text-center">
<button
type="submit"
class="btn mr-2 btn-success"
(click)="evnCreate()"
>
Dodaj wydarzenie
</button>
<button
type="button"
class="btn ml-2 btn-secondary"
(click)="evnAbort()"
>
Anuluj
</button>
</div>
</div>
</div>
</form>
Also, I want to include output from model and response from network monitor:
[Nazwa: "nlnkizcxczx", Opis: "zcxczxzxczxczcx", Ends: "2020-03-04", Ownerusername: "PanMichal"]
Nazwa: "nlnkizcxczx"
Opis: "zcxczxzxczxczcx"
Ends: "2020-03-04"
Ownerusername: "PanMichal"
Network monitor:

Answer 1

As you said, POST body should look like below object:
{
"Nazwa": "String",
"Opis": "Another String",
"Ownerusername": "Another String",
"Ends": "1976-07-28"
}
but you are sending an array
[
Nazwa: "nlnkizcxczx",
Opis: "zcxczxzxczxczcx",
Ends: "2020-03-04",
Ownerusername: "PanMichal"
]
so you should try with sending object instead of an array.
Hope this help

Answer 2

Fixed!
What I did:
I replaced
model: any = [];
To:
model: any = {};