与邮递员一起工作时无法通过表单发送 POST 请求

Question

我在基于Angular 5的前端有一个错误400，在基于Spring Boot的后端没有错误。当我向邮差发送请求时，它的工作是正确的。我不知道我的表格出了什么问题。

以下是Syndic实体：

package smart.syndic.entities;
import java.io.Serializable;
import java.util.Collection;
import java.util.Date;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import com.fasterxml.jackson.annotation.JsonIgnore;
@Entity
public class Syndic implements Serializable 
{
@Id @GeneratedValue
private Long id;
private String numero;
private String nom;
private String email;
private String motPasse;
private String tele;
private String adresse;
private String honoraires;
private String nbrVote;
@Temporal(TemporalType.DATE)
private Date date1;
@Temporal(TemporalType.DATE)
private Date date2;
private String photo;
//-------------------Constructors--------------
//-------------------Getters and Setters-------
@ManyToOne
@JoinColumn(name="ID_SYNDIC_TYPES")
private SyndicTypes syndicTypes;
}

第二个实体SyndicTypes

package smart.syndic.entities;
import java.io.Serializable;
import java.util.Collection;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import com.fasterxml.jackson.annotation.JsonIgnore;
@Entity
public class SyndicTypes implements Serializable 
{
@Id @GeneratedValue
private Long id;

private String designation;
//------------------Constructors------------------
//------------------Getters and Setters------------------
@OneToMany(mappedBy="syndicTypes")
private Collection<Syndic> syndics;
}

restcontroller：

package smart.syndic.web;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import smart.syndic.dao.SyndicRepository;
import smart.syndic.dao.SyndicTypesRepository;
import smart.syndic.entities.Syndic;
import smart.syndic.metier.StorageServiceSyndic;
@RestController
@CrossOrigin("*")
public class SyndicRestController 
{
@Autowired
private SyndicRepository repository;
@Autowired
private StorageServiceSyndic storageServiceSyndic;
@Autowired
private SyndicTypesRepository repository2;
@RequestMapping(value="/syndic", method=RequestMethod.POST)
public Syndic addSyndic(Syndic s,
@RequestParam("file") MultipartFile file)
{
Syndic ss = null;
try
{
ss = repository.save(s);
storageServiceSyndic.store(file, "syndic", ss);
}
catch(Exception e)
{
e.printStackTrace();
//throw new RuntimeException("Impossible de stocker l'image");
}
s.setSyndicTypes(repository2.findOne(s.getSyndicTypes().getId()));
updateSyndic(s, s.getId());
return ss;
}
@RequestMapping(value="/syndic/{id}", method=RequestMethod.PUT)
public Syndic updateSyndic(
@RequestBody Syndic s,
@PathVariable Long id)
{
s.setId(id);
return repository.save(

}

typescript中的服务：

import {Injectable} from "@angular/core";
import {HttpClient, HttpParams, HttpRequest} from "@angular/common/http";
@Injectable()
export class SyndicService
{
host:any = "http://localhost:8080/";
constructor(private http:HttpClient)
{
}
uploadFile(model:any)
{
let formData = new FormData();
formData.append('file', model.file);
formData.append('nom', model.nom);
formData.append('numero', model.numero);
formData.append('email', model.email);
formData.append('motPasse', model.motPasse);
formData.append('tele', model.tele);
formData.append('adresse', model.adresse);
formData.append('honoraires', model.honoraires);
formData.append('nbrVote', model.nbrVote);
formData.append('date1', model.date1);
formData.append('date2', model.date2);
formData.append('photo', model.photo);
formData.append('syndicTypes', model.selectTypeSyndic);
let params = new HttpParams();
const options = {
params: params,
reportProgress: true,
};
const req = new HttpRequest('POST', this.host+"syndic", formData, options);
return this.http.request(req);
}
}

typescript中的控制器：

import { Component, OnInit } from '@angular/core';
import {SyndicService} from "../../services/syndic.service";
import {SyndicTypesModel} from "../../modeles/syndicTypes.model";
import {SyndicModel} from "../../modeles/syndic.model";
@Component({
selector: 'app-ajouter-syndic',
templateUrl: './ajouter-syndic.component.html',
styleUrls: ['./ajouter-syndic.component.css']
})
export class AjouterSyndicComponent implements OnInit {

selectTypeSyndic:any;
tousLesTypeSyndic:any;
numero:any;
nom:any;
email:any;
motPasse:any;
tele:any;
adresse:any;
honoraires:any;
nbrVote:any;
date1:any;
date2:any;
photo:any = null;
syndicTypes:any;
imageURL:any;
fileToUpload:any;
newType:any;
modelTypesSyndic:any;
modelSyndic:any;
constructor(private service:SyndicService) { }
ngOnInit() {
this.getAllTypes();
}
ajouterSyndic()
{
this.modelSyndic = new SyndicModel();
this.modelSyndic.numero = this.numero;
this.modelSyndic.nom = this.nom;
this.modelSyndic.email = this.email;
this.modelSyndic.motPasse = this.motPasse;
this.modelSyndic.tele = this.tele;
this.modelSyndic.adresse = this.adresse;
this.modelSyndic.honoraires = this.honoraires;
this.modelSyndic.nbrVote = this.nbrVote;
this.modelSyndic.date1 = this.date1;
this.modelSyndic.date2 = this.date2;
this.modelSyndic.file = this.fileToUpload;
this.modelSyndic.photo = this.photo;
this.modelSyndic.syndicTypes = this.selectTypeSyndic;
this.service.uploadFile(this.modelSyndic)
.subscribe(data=>{

this.modelSyndic = data;
}, err=>{
console.log(err);
}, ()=>{
});
}
}

HTML视图：

<form class="form-horizontal form-label-left" #f1="ngForm" 
enctype="multipart/form-data">
<div id="containerAjouterSyndic">
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Type de Syndic<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="input-group">
<select class="form-control" 
name="selectTypeSyndic"
[(ngModel)]="selectTypeSyndic" >
<option *ngFor="let v of tousLesTypeSyndic" 
[value]="v.id">
{{v.designation}}
</option>
</select>
<span class="input-group-btn">
<button type="button" class="btn btn- 
default" data-toggle="modal" data-target="#myModalTypeSyndic">
Ajouter Type Syndic
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Numero<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="numero" name="numero" 
class="form-control col-md-7 col-xs-12" type="text" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Nom<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="nom" name="nom" class="form- 
control col-md-7 col-xs-12" type="text" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Email<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="email" name="email" 
class="form-control col-md-7 col-xs-12" type="email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Mot de Passe<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="motPasse" name="motPasse" 
class="form-control col-md-7 col-xs-12" type="password" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Téléphone<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="tele" name="tele" class="form- 
control col-md-7 col-xs-12" type="text" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Adresse<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea [(ngModel)]="adresse" name="adresse" 
class="form-control" placeholder="Adresse...">
</textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Honoraires<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="honoraires" name="honoraires" 
class="form-control col-md-7 col-xs-12" type="text" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Nombre Vote<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="nbrVote" name="nbrVote" 
class="form-control col-md-7 col-xs-12" type="text" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Date Début Mondat<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="date1" name="date1" 
type="date" class="form-control col-md-7 col-xs-12"  required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Date Fin Mondat<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="date2" name="date2" 
type="date"  class="form-control col-md-7 col-xs-12" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Photo<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input name="file" class="form-control col-sm-6 
col-md-7 col-xs-12"
type="file" required 
(change)="handleFileInput($event)">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Image Preview</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<img class="imagePrestataires" [src]="imageURL">
</div>
</div>
</form>
<!-- Modal Type -->
<div class="modal fade" id="myModalTypeSyndic" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabelType">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" 
aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabelType">Ajouter 
Type Syndic</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-label-left" 
enctype="multipart/form-data">
<div id="containerTypeSyndic">
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col- 
xs-12">Nouveau Type<span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input [(ngModel)]="newType" name="newType" 
class="form-control col-md-7 col-xs-12" type="text" required>
</div>
<button type="button" class="btn btn-success"  
(click)="ajouterTypes()">Ajouter</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data- 
dismiss="modal">Fermer </button>
</div>
</div>
</div>
</div>
<!-- / Modal Options -->

<div class="ln_solid">
</div>

</div>
</div>

Postman生成的工作代码：

POST /syndic HTTP/1.1
Host: localhost:8080
Cache-Control: no-cache
Postman-Token: 568c8846-87a6-c194-2845-bdb6a6da1e69
Content-Type: multipart/form-data; boundary=---- 
WebKitFormBoundary7MA4YWxkTrZu0gW
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="numero"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="nom"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="email"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="motPasse"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="tele"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="adresse"
sdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="honoraires"
dsdsd
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="nbrVote"
adfg
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="date1"
01/01/1990
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="date2"
01/01/2009
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; 
filename="39320551_2003684179922600_4018500942646214656_n.jpg"
Content-Type: image/jpeg

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="photo"
null
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="syndicTypes"
1
------WebKitFormBoundary7MA4YWxkTrZu0gW--

谢谢。

Answer 1

在日期字段中，您必须为每个日期提供一种格式，例如：

@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm")
private Date date1;