CODEWITHSUNDEEP
angularjsvalidationspring-mvc
coure2011
coure2011

Reputation: 42474

How to use angularjs with springmvc to get server side validation?

My web application is built using spring mvc and currently I am validating it via jquery on frontend and spring-mvc on backend. The code for this is something like

<form:input path="defaultDate" size="20" />
<form:errors path="defaultDate" />

for each element I have to place the form:errors control. Now I want to move to angularjs but not sure how to validate the backend code. I just want to use the simple html template instead of jsp code and templates and I can validate it easily via angularjs... something like

    <input ng-model="defaultDate" type="text" name="defaultDate" id="defaultDate" required />
    <label ng-show="userForm.defaulteDate.$invalid" class="error">Please enter val</label>

but how to validate it on server side and place the error correctly?

Upvotes: 2

Views: 3937

Answers (2)

Nathan Williams
Nathan Williams

Reputation: 1013

While it's legitimate to suggest that validation logic should be pushed to the client and duplicated on the server side (but more generic in its response), there are validations that are more practical or only possible to perform on the server side. An example is a registration form verifying that a username is not already taken. So, you can't entirely dodge the problem of binding a server-generated message or error condition back to the client UI.

The Angular way of handling message binding is to hook into the NgModelController object of ngModel. Its $errors property can be decorated with as many keys as you have error conditions, and that property in turn can drive message display in the template. This is normally done with a custom validation directive added as an attribute to the input element. There's a good example of this here along with helpful explanation of the new ngMessages directive.

Angular provides the model controller and templating mechanism. Getting the messages into the server response, unpacking them on the client and binding them to the model controller is your responsibility. Note that you can access the form controller object by its name as a scope variable and the field models as properties of that. You won't see this initially in your view controller since the form controller doesn't come into existence until after the view has rendered, but callbacks in the controller handling a server response can use it. Here's an example of this approach with rails.

Upvotes: 2

user128268
user128268

Reputation: 126

As Jb Nizet noted in his comments, server-side and client-side validation should be separate layers, and you should do both.

To get you started in the right direction on this from an Angular perspective, you can use the input[date] directive that comes out of the box with Angular. Note, though, that it is less flexible if you're supporting non-HTML5 browsers. It would be prudent to explore the documentation on custom validation, because it makes it super easy to wire validation logic of any complexity to any input.

Upvotes: 1

Related Questions