Angular - FormGroup Anzeige json Fehler vom Server Ruhe Api

Question

habe ich einen REST-API-Server mit dem PHP-Framework Symfony, dass diese Arten von Nachrichten zurück:

{ 
    "code": 400, 
    "message": "Validation Failed", 
    "errors": { 
    "children": { 
     "email": { 
     "errors": [ 
      "This address mail is already used." 
     ] 
     }, 
     "name": { 
     "errors": [ 
      "This name is too short." 
     ] 
     }, 
     "password": [] 
    } 
    } 
} 

Und auf der Vorderseite mit kantigem FormGroup habe ich diesen Code :

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 

import { RegisterService } from './register.service'; 

@Component({ 
    selector: 'app-authentication', 
    templateUrl: './authentication.component.html', 
}) 
export class AuthenticationComponent { 
    loginForm: FormGroup; 
    error: string = ''; 

    constructor(
     private formBuilder: FormBuilder, 
     private registerService: RegisterService, 
     private router: Router 
    ) { 
     this.loginForm = formBuilder.group({ 
      'name': ['', Validators.required], 
      'email': ['', Validators.required], 
      'password': ['', Validators.required] 
     }); 
    } 

    onSubmit() { 
     this.authenticationService 
      .authenticate(this.loginForm.value) 
      .subscribe(
       data => { 
        localStorage.setItem('id_token', data.token); 
        this.router.navigate(['post']); 
       }, 
       error 
       => 
       // Do something 
       // Display server json errors in the corresponding fields 
      ); 
    } 
} 

Wie kann ich jede Fehlermeldung von REST API erhalten und unter dem entsprechenden Feld anzeigen?

Vielen Dank für Ihre Hilfe

Answer 1

faule Art und Weise ist zu tun, um den Fehler Attribut manuell für jedes Feld (E-Mail, Namen) zu holen.

emailError : string = ''; 
nameError : string = ''; 

onSubmit() { 
     this.authenticationService 
      .authenticate(this.loginForm.value) 
      .subscribe(
       data => {       
        localStorage.setItem('id_token', data.token); 
        this.router.navigate(['post']); 
       }, 
       (error : any) => { 
       let errorData = error.json(); 
       if(errorData.children.email.errors.length > 0){ 
        this.emailError = errorData.children.email.errors[0]; 
       } 
       if(errorData.children.name.errors.length > 0)){ 
        this.nameError = errorData.children.name.errors[0]; 
       } 
       } 
      ); 
    } 

HTML-Code zu begegnen Fehler in Form

<input formControlName="name" /> 
<span *ngIf="nameError != ''">{{nameError}}</span>  // error from back end 
<div *ngIf="loginForm.controls['name'].hasError('required')">Please enter name</div> // form error in frontend 

Alternativ können Sie es tun ngClass mit

<div [ngClass]="{'has-error': loginForm.controls['name'].invalid}"> 
    <input formControlName="name" /> 
</div> 

Referenz: How to show the 'has-error' class on an invalid field in Angular 2

Answer 2

Sie können die Antwortcode für jede erhalten Art von Fehler, wenn das Format des Arrays wird d für eindeutige Fehler.

error => { if (error.code=="400"){this.error = error.errors.children.email.errors[0];} if (error.code=="412"){...} }

Answer 3

Diese Antwort ist nicht viel anders als Amit ist, aber hier sind wir nicht Einstellwerte auf die gleiche Art und Weise Langschrift, sondern die Fehler in einem Objekt zu speichern. Dies könnte wahrscheinlich etwas mehr verfeinert werden;)

formErrors = {}; // object to store error messages 

... 
(error : any) => { 
    // get the nested errors 
    let errorData = error.json().errors.children; 
    // iterate the keys in errors 
    for(let key in errorData) { 
     // if key has nested "errors", get and set the error message, else set null 
     errorData[key].errors ? this.formErrors[key]=errorData[key].errors[0] : this.formErrors[key] = null 
    } 
} 

und dann in der Vorlage würden Sie nur die Fehlermeldungen angezeigt, wenn sie vorhanden sind:

<label>Name</label> 
<input formControlName="name" /> 
<small *ngIf="formErrors.name">{{formErrors.name}}</small> 

<label>Email</label> 
<input formControlName="email" /> 
<small *ngIf="formErrors.email">{{formErrors.email}}</small> 

<label>Password</label> 
<input formControlName="password" /> 
<small *ngIf="formErrors.password">{{formErrors.password}}</small> 

Erinnern Sie sich das formErrors Objekt nach jeder Runde zurückgesetzt werden, so Sie haben die aktualisierten Werte :)