How do I show error message separately in angular js in mvc cshtml page?

Question

I have implemented server side validation in mvc project.

controller code

   return Json(ListErrors, JsonRequestBehavior.AllowGet);

create.js

     .error(function (responseText, status, error) {
                                $scope.errorvalue = false;
                                $scope.errors = responseText;
   $('#txtname').addClass('errorClass');
                $scope.name = responseText;
                    $scope.namealert = true;
                            });

In responseText I'm getting list of errors with property name and error message , enter image description here

How can I bind error message to different labels based on property name?

If property name is Name then error message should be please enter name for name input textbox

I tried like following but it gives all object value :(

  <input id="txtname" type=text ng-model="Name" class="form-control">
  <label ng-model="name" ng-show="namealert" style="color:red;margin-top:-35px">{{name}}</label>

output

[{"PropertyName":"Name","ErrorMessage":"Please enter Namename","AttemptedValue":null,"CustomState":null,"ErrorCode":null,"FormattedMessageArguments":null,"FormattedMessagePlaceholderValues":null}]

Why don't you use an ng-repeat over responseText (which seems to be an object and not a string/text, so the variable name is a bit off) or extract the first items error message using responseText[0].ErrorMessage? — Patrick
– Patrick, Commented Jun 2, 2015 at 17:13
I'm very new to angular and I want to extract error messages using propertyName I'm confused how Name textbox can bind Name property error message? — Neo
– Neo, Commented Jun 2, 2015 at 17:14
What do you mean with "using propertyName"? What value do you expect to be in your input, and why, and where does it come from? — Patrick
– Patrick, Commented Jun 2, 2015 at 17:22
Btw, your <label> should have the for attribute to refer to your input, <label for="txtname"></label> if you want them to be related to each other — Patrick
– Patrick, Commented Jun 2, 2015 at 17:23
I mean to say if I have two input one is for Name other is for Description now When I got two errors like please enter name and please enter description I should apply name error to name textbox. and description error message to description textbox but i;m failed to display messages with different textbox I can display all messages at one place using MyErrors in errors thats is ` $scope.errors = responseText;` — Neo
– Neo, Commented Jun 2, 2015 at 17:28

SRSonnenwald · Accepted Answer · 2015-06-02 17:27:00Z

1

So you are close. You have your JSON that contains the key/value pairs that you would like to bind. In your controller parse the JSON to get the values out and set the value you get out to a property on the viewmodal that you have bind to a label control.

Here is a website with an example: https://ujjaini.wordpress.com/2014/06/09/binding-json-data-to-front-end-angular-js-framework/

answered Jun 2, 2015 at 17:27

SRSonnenwald

3013 silver badges11 bronze badges

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

2 Comments

SRSonnenwald Over a year ago

Read this to learn more on binding: codeproject.com/Articles/808257/Part-Data-Binding-In-AngularJS

Neo Over a year ago

thanks how may I convert it in my above code if possible jsfiddle will be helpful as i;m new to angular thanks :)

Collectives™ on Stack Overflow

How do I show error message separately in angular js in mvc cshtml page?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related