Я хотел добавить новую запись в свою базу данных MS SQL с помощью Angular SPA, но при отправке формы я получил только ошибку 400 - Плохой запрос. Я думаю, что это только ошибка SPA, потому что все работает очень хорошо, когда я тестирую его с почтальоном.
Мое POST тело должно выглядеть так:
{
"Nazwa": "String",
"Opis": "Another String",
"Ownerusername": "Another String",
"Ends": "1976-07-28"
}
Итак, я сделал простое модель в моем 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 = '/';
}
}
Этот скрипт использует evntservice.component.ts, поэтому я хочу присоединить его тоже:
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);
}
}
Мой eventcreator.component.html выглядит следующим образом:
<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>
Кроме того, я хочу включить вывод модели и ответ сетевого монитора:
[Nazwa: "nlnkizcxczx", Opis: "zcxczxzxczxczcx", Ends: "2020-03-04", Ownerusername: "PanMichal"]
Nazwa: "nlnkizcxczx"
Opis: "zcxczxzxczxczcx"
Ends: "2020-03-04"
Ownerusername: "PanMichal"
Сетевой монитор:
