How to update Angular validation messages after $http response?

Question

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).

Banana-In-Black · Accepted Answer · 2013-12-14 23:04:48Z

2

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>

edited Dec 14, 2013 at 23:04

answered Dec 14, 2013 at 19:49

Banana-In-Black

2,5571 gold badge29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

edt Over a year ago

Thanks, that sounds good, but if I do it that way, it seems like the field will stay in error state until the form is submitted again. Is that right? Instead, I would like the validation message to disappear as soon as the user types a valid value. Is there any way to just make a request to Angular: please perform validation on form field with name=x? Or, please perform validation on all form fields? Then, I would not need to add an additional "small" tag as shown in your example.

Banana-In-Black Over a year ago

Do you have different validation rules for server/ client?

edt Over a year ago

No, the validation rules are the same on the server and client.

Banana-In-Black Over a year ago

So.. do you just want to display custom message? Because client should always reflect the error state of input value according to that markup, no matter you submitted the form or not.

edt Over a year ago

I'm not looking for a way to display custom validation messages. In one case, the client does not always show the validation messages as desired. For example, if required form fields have not been touched by the user before the form is submitted, they will not show validation messages. So, my goal is that upon form submission, all form fields are validated and show validation messages if needed. First, the client side validation should be used. 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.

|

Collectives™ on Stack Overflow

How to update Angular validation messages after $http response?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related