Angular2 Comment afficher le message d'erreur du backend

Question

Je souhaite afficher le message d'erreur dans une alerte de bootstrap. J'utilise angular2 comme frontend et lumen comme backend.

Frontend

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

Je veux que la réponse de la fonction de validation affichée sur le 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') 
    ); 
} 

}

dans mon 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); 
    } 
); 

}

La réponse

Answer 1

Je placerais le message d'erreur (si l'on est retourné) égale à une variable angulaire et vérifier si cette variable existe pour décider si pour l'afficher.

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

composant:

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 
     } 
    ); 
    } 
} 

Pour afficher correctement tous les messages, vous aurez probablement besoin de boucle à travers la réponse JSON et soit concaténer la chaîne, ou ajouter les messages individuels comme <li> éléments dans un liste non ordonnée.

Answer 2

Dans votre demande http, vous devez ajouter une prise, quelque chose comme ce qui suit:

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); 
} 

Ensuite, ajoutez la fonction handleError:

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); 
} 

Cette fonction HandleError vous donnera la réponse de retour ensemble du serveur côté. Vous pouvez facilement extraire le message d'erreur du corps de la réponse et l'affecter à une variable. Ensuite, vous pouvez utiliser l'interpolation pour afficher le message d'erreur dans l'alerte de bootstrap.