Comment faire et afficher les erreurs de validation du serveur dans angular

Question

Je suis nouveau à angulaire. J'essayais quelque chose et j'étais coincé. Dans ma forme, je veux montrer la réponse de la validation du serveur comme une erreur provenant d'un laravel API de repos. Mais je ne sais pas comment stocker et le montrer dans le modèle. Je suis capable de le connecter. à la console mais pas capable de progresser avec le message d'erreur.

La réponse est quelque peu comme ça -

{
    "message": {
        "firstname":["The firstname field is required."],
        "lastname":["The lastname field is required."],
        "email":["The email field is required."],
        "password":["The password field is required."]
    }
}

le code de service :

registerUser(user): Observable<any> {
    return this.http
      .post<any>(`${this.url}/register`, user)
      .pipe(map(res => res.message));
}

la méthode de l'utilisateur du registre dans la classe de composants :

registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
        res => console.log(res),
        err => console.log(err)
    );
}

Aussi, corrigez-moi si je vais mal n'importe où et comment dois-je corriger

Answer 1

Voici comment ça a fonctionné.
[.____] Merci à tous de répondre à ma question.
[.____] la méthode de la classe des composants :

errors = [];
  registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
      res => console.log(res),
      err => {
        this.errors = err.error.message;
        console.log(this.errors);
      }
    );
  }

Le formulaire dans le modèle :

 <div class="form-group">
            <label>Firstname</label>
            <input
              type="text"
              formControlName="firstname"
              name="firstname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.firstname"
            />
            <span *ngIf="errors.firstname" class="text-danger">{{
              errors.firstname
            }}</span>
          </div>