CODEWITHSUNDEEP
validationangularjs
edt
edt

Reputation: 22410

How to update Angular validation messages after $http response?

I'm using Angular $http (http://docs.angularjs.org/api/ng.$http) to submit a form. The server returns JSON:

[{
    "hasValidationErrors": true,

    "validationErrors": {
        "inputNameAttributeValue": "Error Message 1",
        "anotehrInputNameAttributeValue": "Error Message 2"
    }

}]

Once I receive the JSON response, how do I notify Angular that certain form fields are in an error state so that it automatically changes the view to show error messages?

For example, if I use this markup (from http://www.ng-newsletter.com/posts/validations.html):

<div class="row">
  <div class="large-12 columns">
    <label>Your name</label>
    <input type="text" 
        placeholder="Name" 
        name="inputNameAttributeValue" 
        ng-model="signup.name" 
        ng-minlength=3 
        ng-maxlength=20 required />
   <div class="error" 
        ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
    <small class="error" 
        ng-show="signup_form.name.$error.required">
         Your name is required.
    </small>
    <small class="error" 
            ng-show="signup_form.name.$error.minlength">
            Your name is required to be at least 3 characters
    </small>
    <small class="error" 
        ng-show="signup_form.name.$error.maxlength">
        Your name cannot be longer than 20 characters
    </small>
  </div>
  </div>
</div>

I'm looking for a solution that works with my existing data binding markup in my html doc.

I can change the markup, but I don't want to have two separate sections of markup for each form input (one for client side validation and another for validation after the JSON response).

Upvotes: 2

Views: 2762

Answers (1)

Banana-In-Black
Banana-In-Black

Reputation: 2557

Update:

For example, if required form fields have not been touched by the user before the form is submitted, they will not show error messages. So, my goal is that upon form submission, all form fields are validated and show validation messages if needed.

That's because ng-show is triggered by both $dirty and $invalid flag.
You can manually set all $dirty of input fields to true when ngSubmit fired.

But, in the case the user has tampered with the form, the JSON response from the server should be used to add validation messages as well.

If validation failed on server, just bring these tampered values back to angular models on client and use $apply if needed. AngularJS should do the rest of work.

Simulating example: http://jsfiddle.net/djpV8/4/


Origin:

how about set error messages to the scope and simply display it when it's defined:

scope.errorMessages = returnedJson.validationErrors;

just add a block for displaying custom message from server

<!-- place error messages next to corresponding input fields. -->
<small class="error" 
    ng-show="errorMessages.inputName"
    ng-bind="errorMessages.inputName"></small>

Upvotes: 2

Related Questions