how to show error message on view through controller in angular

Question

I have to show an error msg on unique validation check on my html page. I have set error msg on $scope variable. But I am not getting how to display error msg on html page.

This is my controller code where I am setting error msg like:

$scope.error=="Name already in use"

This is my html page where I want to show error message:

<!--I am showing msg like this but the poblem is when the page is being loaded {} comes. -->
<span class="error" ng-show="error"> {{error}}</span>

How to show error msg only when some error msg comes. Please suggest some way for this.

enter image description here

Because $scope.error=="Name already in use" does not set $scope.error — Carson Drake
– Carson Drake, Commented Jun 24, 2015 at 9:27
I have set an error msg like this. I want to show this error msg if validation fails — CoderBeginner
– CoderBeginner, Commented Jun 24, 2015 at 9:34

Divya MV · Accepted Answer · 2015-06-24 10:00:31Z

2

from docs

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

<span class="error" ng-show="error" ng-cloak> {{error}}</span>

or i guess you have initialized $scope.error='{}' somewhere,remove it if that's the case.

edited Jun 24, 2015 at 10:00

answered Jun 24, 2015 at 9:27

Divya MV

2,0514 gold badges34 silver badges59 bronze badges

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

3 Comments

CoderBeginner Over a year ago

I have tried your solution but still am getting blank braces {} when there is no error msg. Adding a screenshot for your refrence

Divya MV Over a year ago

@FatemaRangwala have you initialised your $scope.error somewhere?

CoderBeginner Over a year ago

there is no error on console, If have only set $scope.error=undefined on change event of the field. I haven't initialized it anywhere.

koustubh · Accepted Answer · 2015-06-24 09:27:07Z

2

try < span ng-bind="error" >< /span >"

In the case when there is no error you need to reassign a null or an empty value to the error variable of the scope.

answered Jun 24, 2015 at 9:27

koustubh

1062 silver badges8 bronze badges

2 Comments

Carson Drake Over a year ago

koustubh is right. <span ng-bind="error">Default Message</span> is the correct way to handle the flicker loading.

Carson Drake Over a year ago

In addition to ng-bind, I recommend including ng-if="error"

Collectives™ on Stack Overflow

how to show error message on view through controller in angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related