Required request body is missing : front request issues

Question

I made a POST request to add a new entity to the database from my project back-end i tested it on postman and it worked so well

but when i try to add a new entity from the front UI (I'm using angular 4) i got this error : Required request body is missing:

Failed to load resource: the server responded with a status of 500 (Erreur Interne de Servlet)

i guess that something wrong with my typescript code can anyone help me on this ?

<form (ngSubmit)="createEntity()">
    <div class="form-group">
      <label for="code">Code</label>
      <input type="text" [(ngModel)]="code" placeholder="Code" name="code" class="form-control" id="code">
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <input [(ngModel)]="description" placeholder="Description" name="description" class="form-control" id="description">
    </div>
    <div  class="form-group">
       <label for="type">Type</label>
      <p-dropdown [(ngModel)]="type" [options]="entityTypes" filter="filter" name="type" placeholder="Type" [style]="{'width':'100%'}">
      </p-dropdown>
    </div>  
        <div  class="form-group">
       <label for="numero">Profil</label>
       <p-dropdown [(ngModel)]="profil" [options]="entityProfiles" filter="filter" name="profil" placeholder="Profil" [style]="{'width':'100%'}">
      </p-dropdown> 
    </div>
    <div class="form-group">
      <label for="number">number</label>
      <input [(ngModel)]="number" placeholder="number" name="number" class="form-control" id="number">
    </div>
    <button type="submit" class="btn btn-success">Valider</button>
  </form>


        

entity: Entity;

export interface Entity {
  id?: string;
  code?: string;
  description?: string;
  type?: string;
  number?: string;
  profil?: string;
}  


createEntity(): void {
        this.EntitySRV.CreateEntity(this.entity)
            .subscribe(data => {
                alert("Entity created successfully.");
            });
    }; 

// entity service .ts
CreateEntity(entity) {
    const entityUrl = this._entity;
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Headers', 'Content-Type, Accept');
    return this.http.post(entityUrl, entity, { headers })
        .map(res => {
            return res.json();
        })
        .catch(this.handleError);
}

    //RestController : 
     @PostMapping
        public Entite create(@RequestBody Entite entite){
            return entityService.create(entite);
        }


 //Service     
    @Override
    public Entite create(Entite entite) {
    entityDao.persist(entite);
    return entite;
            }

 // DAO 

    private static final String QUERY_SAVE_ENTITY           = " INSERT INTO Entite(code, description, numero, profil,type)";

        @Override
        public Entite saveEntity() {
        return (Entite) executeQuery(QUERY_SAVE_ENTITY);
    }

Thank you in advance :)

Answer 1

Problem Resolved :)

Solution : I worked with HttpClient instead of the old http And edited my code like below :

   //service
   CreateEntity(entite) {
        const entityUrl = this._entity;
        return this.httpc.post(entityUrl, entite);
    }
    
    
   //ts
   
   entite = new Entite();
   
    createEntity(): void {
    
        this.EntitySRV.CreateEntity(this.entite)
            .subscribe(data => {
                 this.submitted = true;
            });
    }  
    
    
   
    

  <form>
    <div class="form-group">
      <label for="code">Code</label>
      <input type="text" [(ngModel)]="entite.code" placeholder="Code" name="code" class="form-control" id="code">
    </div>
    <div class="form-group">
      <label for="description">Description</label>
      <input [(ngModel)]="entite.description" placeholder="Description" name="description" class="form-control" id="description">
    </div>
    <div  class="form-group">
       <label for="numero">Type</label>
      <p-dropdown [(ngModel)]="entite.type" [options]="entityTypes" filter="filter" name="type" placeholder="Type" [style]="{'width':'100%'}">
      </p-dropdown>
    </div>  
        <div  class="form-group">
       <label for="numero">Profil</label>
       <p-dropdown [(ngModel)]="entite.profil" [options]="entityProfiles" filter="filter" name="profil" placeholder="Profil" [style]="{'width':'100%'}">
      </p-dropdown> 
    </div>
    <div class="form-group">
      <label for="numero">Numero</label>
      <input [(ngModel)]="entite.numero" placeholder="numero" name="numero" class="form-control" id="numero">
    </div>
    <!-- removed the type="button" cuz it didn"t let the (click) do its job ;) -->
    
    <button (click)="createEntity()" class="btn btn-success">Valider</button>
  </form>

TADAAA :D