-2

Is there some "best practice" to integrate Angular reactive forms with server side validation? Searching, for now I found only

https://www.puzzle.ch/de/blog/articles/2017/01/18/server-side-validations-with-angular-2

EDIT

Not being able to answer myself this question, closed by some of Stackoverflow's overzealous users, I nevertheless suggest to look into the code generated by JHipster (CRUD code generator for Angular/Spring applications) for the case of a new entity with client and server side validation.

John Donn
  • 1,718
  • 2
  • 19
  • 45
  • 2
    explain the downvote, please. Validating only client side is a secutirty risk: https://stackoverflow.com/questions/3531968/why-is-client-side-validation-a-security-risk-as-opposed-to-server-side-validati – John Donn Jun 17 '18 at 06:00
  • 1
    The downvotes are because you're asking for opinions (best practice) and off site resources (at least you suggest that by posting a link), both of which are off-topic. – Ingo Bürk Jun 17 '18 at 06:26
  • 1
    If you want to discuss the goal and rules of the platform itself, that's a discussion you should take to meta. Question comments are definitely the wrong place for it. As far as the question goes: show example code, describe your thoughts and findings instead of dumping links and ask specific questions. Right now your question, to me, screams that you didn't care to put any effort in asking it which will drive many people away from answering it. – Ingo Bürk Jun 17 '18 at 06:49
  • 2
    i think is just missunderstood, @JohnDonn have just ask how to integrate ServerSide validation answer inside Angular Reactive Form.. He don't ask opinion or what ever, just how to do this. – Yanis-git Jun 17 '18 at 07:58
  • It's pretty hard to find any good information on this subject. This is perhaps the best article I've found so far: https://juristr.com/blog/2019/02/display-server-side-validation-errors-with-angular/ - but it doesn't offer any guidance on the best way to couple the form and the request or observable. Obviously it's trivial to associate them in a primitive way, but it would be great to do it in an elegant, centralized manner that doesn't require explicit effort in all form-handling components. – Leaky Jan 28 '21 at 08:05
  • @MrValueType The approach we ev. took was replicating the server side validation on the client side. This is not ideal of course, and not always doable (when the validation has to check things on the db, for example), but it is fast, the validation logic is rarely so complicated that we had to start to worry about coding errors during validation code replication, and in the rare cases when the client validation is OK and the server validation is not, a modal dialog appears with the desrciption of the server side error (so that we don't have to think about coloring the form fields in red ecc). – John Donn Jan 28 '21 at 11:00

1 Answers1

1

First i will clarify why we should integrate both client and server side validation for three main reasons :

  • client side validation does not require any async call to validate information. is smoother for user experience.
  • Server side validation is obligation for security reason.
  • Server side can add business form validation (You enter new user, in server you can check if this user nam is not already taken).

Then about your question. include Server side validation error message on your reactive form looks to be great idea (especially for last reason above).

For that, as pruposed by your link, you should take adventage of HTTP status code who will help you to categorize your error type. Then you have to design generic ErrorResponseBag. For Example (and is just example easy to understand), MangoPay API have bellow schema for error reporting :

{
    "resultCode" : 1234,
    "ResultMessage" : "some message",
    "MoreInformation" : "Optional extra information"
}

ResultCode : Is number who make reference to specific constant type error.

Then is easy to create EasyErrorHandler who intercept each HttpErrorResponse and put it on Alert or what ever.

Sample of HttpInterceptor in StackBlitz

source for mangopay

Note : if you need more information about HttpInterceptor file free to ask me

Yanis-git
  • 7,737
  • 3
  • 24
  • 41