角 - 從服務器REST API FormGroup顯示JSON錯誤

Question

我與PHP框架的Symfony返回該類消息的REST API服務器：

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

和前側角FormGroup我有這樣的代碼：

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

如何從REST API獲取每條錯誤消息並在相應的字段下顯示？

感謝您的幫助

Answer 1

做的懶人方法是手動獲取錯誤屬性爲每個字段（電子郵件，名稱）。

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代碼來對抗差錯形式

<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 

另外，您可以用做ngClass

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

參考：How to show the 'has-error' class on an invalid field in Angular 2

Answer 2

你可以爲每個響應代碼如果數組的格式爲d，則會出現錯誤如果遇到獨特的錯誤。

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

Answer 3

這個答案並不比Amit的太大的不同，但在這裏我們不設置值以同樣的方式速記，而是存儲對象中的錯誤。這也許可以多一些細化;）

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

，然後在模板中，你會只顯示錯誤消息，如果它們存在：

<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> 

記住每一輪的formErrors對象重置，所以你有更新的值:)