You have to include the necessary request body in the front-end request to address the

Question

You have to include the necessary request body in the front-end request to address the

After successfully testing a POST request to add a new entity to the database from my project back-end using Postman, I encountered an error when trying to do the same from the front UI (I'm using Angular 4): Required request body is missing.

Failed to load resource: the server responded with a status of 500 (Internal Servlet Error)

I suspect there might be an issue with my TypeScript code. Can anyone assist me with 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="profil">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">Submit</button>
  </form>

Thank you in advance :)

angular typescript spring-mvc angular4-forms

Answer 1

Answer №1

If you need help with service and component functions, take a look at this code snippet.

Appservice.ts file

        import { Injectable } from '@angular/core';
        import { Http, Response, ResponseContentType } from '@angular/http';
        import { Observable } from 'rxjs/Observable';
        import { Jsonp, URLSearchParams } from '@angular/http';
        import { Headers, RequestOptions } from '@angular/http';
        import 'rxjs/add/observable/throw';
        import 'rxjs/add/operator/catch';
        import 'rxjs/add/operator/map';
        import { HttpHeaders } from '@angular/common/http';
        @Injectable()
        export class AppService {
            utcOffset = -(new Date().getTimezoneOffset());
            private CONTENT_TYPE_JSON = 'application/json';
            private CONTENT_TYPE_FORM_DATA = 'application/x-www-form-urlencoded';
            private ACCEPT = 'application/json';
            private UTC_OFFSET;
            private PLATFORM = 'WEB';
            private APP_VERSION = '1.00';
            private VERSION = '1.0';

            constructor(private http: Http) {
                const offset = this.utcOffset / 60;
                this.UTC_OFFSET = offset.toString();
            }

            postJSONData(apiUrl: string, value: Object): Observable<any> {
                const body = value;
                const headers = new Headers();
                headers.append('Content-Type', this.CONTENT_TYPE_JSON);
                headers.append('utc-offset', this.UTC_OFFSET);
                headers.append('platform', this.PLATFORM);
                headers.append('app-version', this.APP_VERSION);
                headers.append('version', this.VERSION);
                headers.append('accept', this.ACCEPT);
                if (localStorage.getItem('userData')) {
                const user = JSON.parse(localStorage.getItem('userData'));
                headers.append('token', user.token);
                headers.append('session', user.session);
                }
                return this.http.post(apiUrl, body, { headers: headers })
                .map(this.extractData)
                .catch(this.handleServerError);
            }

            private extractData(res: Response) {
                    let body = res.json();
                    var headers = res.headers;
                    if (body.status == 500) {
                    let error = body;
                    let errMsg = (error.msg) ? error.msg : ((error.status) ? `${error.status} - ${error.statusText}` : 'Request error');
                    }
                    return body || {};
            }
            private handleServerError(error: any) {
                    const defaultErrorMsg = 'Internal server error, please try again';
                    const customError = 'Could not connect to the server. Please try again later';
                    // `${error.status} - ${error.statusText}`
                    const errMsg = (error.message) ? error.message : ((error.status) ? customError  : defaultErrorMsg);
                    return Observable.throw(errMsg);
            }
        }

Function

   this.appService.postJSONData(URL, data).subscribe(result => {
            console.log(result);
            }, err => {
                console.log(err);
            });

Answer 2

If you need help with service and component functions, take a look at this code snippet.

Appservice.ts file

        import { Injectable } from '@angular/core';
        import { Http, Response, ResponseContentType } from '@angular/http';
        import { Observable } from 'rxjs/Observable';
        import { Jsonp, URLSearchParams } from '@angular/http';
        import { Headers, RequestOptions } from '@angular/http';
        import 'rxjs/add/observable/throw';
        import 'rxjs/add/operator/catch';
        import 'rxjs/add/operator/map';
        import { HttpHeaders } from '@angular/common/http';
        @Injectable()
        export class AppService {
            utcOffset = -(new Date().getTimezoneOffset());
            private CONTENT_TYPE_JSON = 'application/json';
            private CONTENT_TYPE_FORM_DATA = 'application/x-www-form-urlencoded';
            private ACCEPT = 'application/json';
            private UTC_OFFSET;
            private PLATFORM = 'WEB';
            private APP_VERSION = '1.00';
            private VERSION = '1.0';

            constructor(private http: Http) {
                const offset = this.utcOffset / 60;
                this.UTC_OFFSET = offset.toString();
            }

            postJSONData(apiUrl: string, value: Object): Observable<any> {
                const body = value;
                const headers = new Headers();
                headers.append('Content-Type', this.CONTENT_TYPE_JSON);
                headers.append('utc-offset', this.UTC_OFFSET);
                headers.append('platform', this.PLATFORM);
                headers.append('app-version', this.APP_VERSION);
                headers.append('version', this.VERSION);
                headers.append('accept', this.ACCEPT);
                if (localStorage.getItem('userData')) {
                const user = JSON.parse(localStorage.getItem('userData'));
                headers.append('token', user.token);
                headers.append('session', user.session);
                }
                return this.http.post(apiUrl, body, { headers: headers })
                .map(this.extractData)
                .catch(this.handleServerError);
            }

            private extractData(res: Response) {
                    let body = res.json();
                    var headers = res.headers;
                    if (body.status == 500) {
                    let error = body;
                    let errMsg = (error.msg) ? error.msg : ((error.status) ? `${error.status} - ${error.statusText}` : 'Request error');
                    }
                    return body || {};
            }
            private handleServerError(error: any) {
                    const defaultErrorMsg = 'Internal server error, please try again';
                    const customError = 'Could not connect to the server. Please try again later';
                    // `${error.status} - ${error.statusText}`
                    const errMsg = (error.message) ? error.message : ((error.status) ? customError  : defaultErrorMsg);
                    return Observable.throw(errMsg);
            }
        }

Function

   this.appService.postJSONData(URL, data).subscribe(result => {
            console.log(result);
            }, err => {
                console.log(err);
            });

Answer 3

Answer №2

Issue Resolved :)

Fix : I switched to using HttpClient instead of the outdated http method And here is the updated code snippet :

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

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

Success! :D

Answer 4

Issue Resolved :)

Fix : I switched to using HttpClient instead of the outdated http method And here is the updated code snippet :

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

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

Success! :D

You have to include the necessary request body in the front-end request to address the

Answer №1

Answer №2

Similar questions

"Learn the process of integrating Javascript files from the Angular assets folder into a specific Angular component or module (such as Angular 2, 4,

Guide on enabling the Access-Control-Allow-Origin feature for Angular 5 and Node.js:

Switch the icon in Angular 2 while using ngFor loop

Mocking a named class-export in TypeScript using Jest

Sign out from Azure Active Directory using the ADAL library in an Angular application written in TypeScript

The generic parameter is extending a type but is being used in a contravariant position, causing TypeScript to struggle to unify it

Issue arose when attempting to remove an item from an array within React

TypeScript's type 'T' has the potential to be instantiated with any type, even if it is not directly related to 'number'

Tips for resetting and enabling file uploads with ng2-file-upload

By utilizing a function provided within the context, React state will consistently have its original value

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

Passing a complex variable type in TypeScript to a function without the need to redefine the type

Should I use connect or refCount with Angular and rxjs?

Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

Checking the text both before and after clicking a link by using a method such as content verification

What is the method for dynamically assigning a name to ngModel?

"Transform the appearance of the datepicker input field with Material 15's dynamic

The distinction between <Type>function and function name():Type in TypeScript is essential to understand the various ways

A more concise validation function for mandatory fields

Choosing the desired option in Angular 4+ with Chrome selected