CODEWITHSUNDEEP
laravelangularlumen
derrickrozay
derrickrozay

Reputation: 1046

Angular2 How to display error message from backend

I want to display the error message in a bootstrap alert. I'm using angular2 as my frontend and lumen as my backend.

Frontend

<div class="alert alert-danger"> 
    // Display error message here 
</div>

I want the response from the validate function displayed on the frontend 

public function uploadImage(Request $request)
{
    $this->validate($request, [

        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:60000',

    ]);
}

component.ts 

uploadFile(): void {

let file = this.fileInput.nativeElement;
if (file.files && file.files[0]) {
  let fileToUpload = file.files[0];
  this.getInfoService
    .uploadImage(fileToUpload)
    .subscribe(
      data => console.log("DATA", data),
      err => console.log(err),
      () => console.log("()",'yay')
    );
}

}

in my service 

uploadImage(fileToUpload: any) {

let input = new FormData();
input.append("image", fileToUpload);
return this.http.post('http://Api.app/api/v1/uploadImage', input)
  .map(
    (response: Response) => {
      console.log("Upload img service", response);
    }
  );

}

The response

What the response looks like

Upvotes: 1

Views: 10541

Answers (2)

Nehal
Nehal

Reputation: 13297

In your http request you have to add a catch, something like following:

uploadImage(fileToUpload: any) {

let input = new FormData();
input.append("image", fileToUpload);
return this.http.post('http://Api.app/api/v1/uploadImage', input)
  .map(
    (response: Response) => {
      console.log("Upload img service", response);
    })
  .catch(this.handleError);
}

Then add the handleError function:

private handleError(error: any) {
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.of(error);
}

This handleError function will give you back whole response from server side. You can easily extract the error message from response body and assign it to a variable.

Then you can use interpolation to display the error message in bootstrap alert.

Upvotes: 1

jackel414
jackel414

Reputation: 1686

I would set the error message (if one is returned) equal to an angular variable and then check if that variable exists to decide whether to display it.

<div *ngIf="errors" class="alert alert-danger"> 
    {{ errors }} 
</div>

component:

uploadFile(): void {
  this.errors = null;

  let file = this.fileInput.nativeElement;

  if (file.files && file.files[0]) {
    let fileToUpload = file.files[0];
    this.getInfoService
      .uploadImage(fileToUpload)
      .subscribe(
        data => {
          console.log("DATA", data)
        },
        err => {
          this.errors = err
        }
      );
  }
}

To properly display all the messages, you'll likely need to loop through the JSON response and either concatenate the string, or add the individual messages as <li> elements in an unordered list.

Upvotes: 6

Related Questions