Angular 4 lie la réponse HTTP au modèle de type tapuscrit

Question

J'ai une page angulaire de 4 qui reçoit des entrées de l'utilisateur. J'ai une validation sur les contrôles individuels. Sur soumettre je veux faire des validations de serveur (essentiellement revérifier toutes les validations) et renvoyer toutes les erreurs en tant que tableau avec le nom de champ, vrai ou faux et une erreur si elle a échoué.

Je voudrais que ces erreurs correspondent aux contrôles sur la page et affichent comme des erreurs. J'utilise des formulaires réactifs et la réponse du serveur utiliserait le même nom que le contrôle de formulaire. Exemple: le nom du contrôle est «nom». Après soumettre je reçois une réponse en arrière ce nom est invalide. Je voudrais montrer et message d'erreur sous le contrôle. Cela ressemble beaucoup à MVC lorsque des erreurs de soumission sont affichées à côté de chaque contrôle.

Est-ce possible et comment procéder pour générer une liaison générique pouvant être utilisée pour tous les formulaires.

Answer 1

Yes, it is quite simple in angular. Here is an example how to do so. 

    1. HTML file. 

    <form [formGroup]="saveForm" (ngSubmit)="saveData()" > 
     <div> 
      <label>Name</label> 
      <input id="name" type="text" class="form-control" formControlName="name" tabindex="1"> 
     </div> 
     <div *ngIf="errror" > 
      <p>{{errorMsg}}</p> 
     </div> 

     <button type="submit" id="btnSave" >Save</button> 
    </form> 

2.In Component ts. 
a. Defined the formgroup & error message variable. 
    saveForm :FormGroup; 
    errror :boolean = false ; 
    errorMsg :any; 
b. Initialize form group. (You can defined client side validation here using angular validator) 
    this.saveForm = this.fb.group({ 
    name: [''] 
    }); 
c. On save data method you need to set the error bit true. 
saveData() { 
    let data = this.saveForm .value.name; 
    this._userService.save(data) // calling service here. 
     .subscribe(
     (response :any)=> { 
      console.log(response); 
      } 
     }, 
     (error :any) => { 
      this.error = true; 
this.errorMsg = error.error; // assigning server side errro to the variable. 
     } 
     ); 

    } 

That's done.