Handle error in AngularJS in controller.js file

Question

I have single page NodeJS + AngularJS app. There are some fields to fill with text. In controller.js I wanna to check if one or more of fields are empty to send alert with error in browser.

My controller.js file:

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
    console.log("Hello World from controller");

    //$http.get('/builder').success(function(response){
    //    $scope.PEM = response;
    //});

    $scope.sendParts = function(){
        var bool = true;
        for(var prop in $scope.pem){
            if(prop == 'undefined'){
                bool = false;
                break;
            }

            if(bool){
                $http.post('/builder', $scope.pem).success(function(response){
                $scope.PEM = response;
            });
            }
            else{
                // why it is not working?
                alert("ERROR");
                //OR
                $scope.PEM = "ERROR";
            }
        }
    }
}]);

index.html file:

<!DOCTYPE>
<html ng-app="myApp">
<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <title>PEMbuilder</title>
    <style>
        .container {
            margin-left: 30%;
            margin-top: 5%;
            padding: 10px;
            background: #ffbf80;
            width: 390px;
            border: 2px solid #ffbf80;
            border-radius: 5px;
        }
        textarea {
            resize: vertical;
        }

    </style>
</head>
<body>


  <div class="container" ng-controller="AppCtrl">
  <h1>PEMbuilder</h1>
          <h4><b>Name of project:</b></h4>
          <input class="data" ng-model="pem.name" type="text">
          <h4><b>Certificate:</b></h4>
          <textarea rows="4" cols="50" class="data" ng-model="pem.crt" placeholder="Enter your certificate"></textarea>
          <h4><b>Intermediate:</b></h4>
          <textarea rows="4" cols="50" class="data" ng-model="pem.int" placeholder="Enter your intermediate"></textarea>
          <h4><b>Root:</b></h4>
          <textarea rows="4" cols="50" class="data" ng-model="pem.root" placeholder="Enter your root"></textarea>
          <h4><b>Private key:</b></h4>
          <textarea rows="4" cols="50" class="data" ng-model="pem.pk" placeholder="Enter your private key"></textarea>
          <h4><b>Password:</b></h4>
          <input class="data" ng-model="pem.pass" type="password">

          <h4><button class="btn btn-primary" ng-click="sendParts()">Create full certificate</button></h4>
          <h4><button class="btn btn-primary" onclick="window.location.href = '/download';">Download full certificate</button></h4>

      <h3 style="color: red">{{err}}</h3>
      <a onclick="$('#text').slideToggle('slow');" href="javascript://">Show/Hide full pem file</a>
      <div id="text" style="display:none; white-space: pre-wrap; word-wrap: break-word; -moz-control-character-visibility: visible;">{{PEM}}</div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js'></script>
  <script src='controllers/controller.js'></script>
</body>
</html>

So I want to handle somehow if any field is empty. screenshot of app

Have you stepped through your code to make sure the 'bool' is actually false? Also, I don't see where $scope.pem is being initiated. Finally, you're referring to $scope.pem and $scope.PEM. — jbrown
– jbrown, Commented Feb 24, 2016 at 21:15
$scope.pem is not defined until your have at least one field with input. One easy work aroundwould be to initially set var bool = $scope.pem. However I suggest you look into ngForm as well — walkerrandophsmith
– walkerrandophsmith, Commented Feb 24, 2016 at 21:17

walkerrandophsmith · Accepted Answer · 2016-02-24 22:37:44Z

2

Notice that when no fields have text entered that $scope.pem is undefined. Once at least one field has text input, the model is defined. A quick work around would be to check if $scope.pem === undefined and if that condition is true, raise an alert.

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.sendParts = function(){
        if($scope.pem === undefined) alert("I have no fields filled out")
        var bool = true;
        for(var prop in $scope.pem){
            if(prop == 'undefined'){
                bool = false;
                break;
            }

            if(bool){

            }
            else{
                // why it is not working?
                alert("ERROR");
                //OR
                $scope.PEM = "ERROR";
            }
        }
    }
}]);

edited Feb 24, 2016 at 22:37

answered Feb 24, 2016 at 21:20

walkerrandophsmith

5745 silver badges15 bronze badges

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

1 Comment

walkerrandophsmith Over a year ago

Please do check out ngForm

Tuximo · Accepted Answer · 2016-02-24 21:41:50Z

0

You need to inject $window to your controller, and use it like this:

$window.alert("ERROR");

$window (angularjs doc)

answered Feb 24, 2016 at 21:41

Tuximo

5712 bronze badges

Collectives™ on Stack Overflow

Handle error in AngularJS in controller.js file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related