アンギュラサーバー休憩APIからFormGroup表示JSONエラーが

Question

私はこのメッセージの種類を返すPHPフレームワークsymfonyにREST APIサーバーを持っています：

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

この回答はアミットのよりもはるかに違いはありませんが、ここでは同じように手書きの値を設定していないが、代わりにオブジェクトのエラーを保存します。これはおそらく、もう少し洗練することができ;）

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オブジェクトをリセットすることを忘れないでくださいあなたは更新された値を持っています:)