How to show error messages in AngularJS?

Question

I have services and controllers written in AngularJS, in which I am sending a post request to Node.js Application and using send status and code to send a error message like Username already exists orWrong email and password but I am not getting How to show these errors in frontend HTML. Like after submit is pressed probably. How would you go about it?

$http.post('/register', registerUser).then(function(response){
                console.log(response.data);
}

How will I show response .data in the HTML. I read about $error in angular but I don't think it will work in my case as mine is a custom error.

Thanks

KyleK · Accepted Answer · 2015-09-26 11:00:09Z

14

Your HTML should be something like:

<div ng-if="errorMessage">{{ errorMessage }}</div>

Then you can modify $scope.errorMessage to display it:

$http.post('/register', registerUser).then(function(response){
    switch(response.data) {
        case 'loginExists':
            $scope.errorMessage = 'Username already exists';
            break;
        case 'loginError':
            $scope.errorMessage = 'Wrong email and password';
            break;
        default:
            $scope.errorMessage = false;
    }
}

answered Sep 26, 2015 at 11:00

KyleK

5,16920 silver badges35 bronze badges

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

1 Comment

Saras Arya Over a year ago

Looks logically correct. Let me try it. I'll get back to you.

Community · Accepted Answer · 2017-05-11 11:00:51Z

4

You can use alert with Bootstrap:

<div ng-show="hasError">
<alert ng-repeat="error in errors track by $index" type="danger"  close="closeAlert($index)">{{error}}</alert>
</div>

in controller:

$scope.errors = [];
$scope.hasError = false;
$scope.closeAlert = function (index) {
    $scope.errors.splice(index, 1);
}

$http.post('/register', registerUser).then(function(response){
switch(response.data) {
    case 'error1':
        $scope.hasError = true;
        $scope.errors.push('error1');
        break;
    case 'error2':
        $scope.hasError = true;
        $scope.errors.push('error2');
        break;
    default:
        $scope.hasError = true;
        $scope.errors.push("I don't know whats going on");
    }
 }
};

You can use it everywhere.

edited May 11, 2017 at 11:00

CommunityBot

11 silver badge

answered Sep 30, 2015 at 10:48

Daniel Kuta

1,63415 silver badges24 bronze badges

Comments

Freddy Castelblanco Macias · Accepted Answer · 2017-10-11 21:01:34Z

0

I think that is better like this:

Message error

answered Oct 11, 2017 at 21:01

Freddy Castelblanco Macias

2271 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to show error messages in AngularJS?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related