Possibly unhandled rejection -- Error when creating a form with angularjs

I created this simple web application to put data into a firebase database. The problem is that I get a error when I open the webpage in my browser. This is the error I get

Possibly unhandled rejection: {} angular.js:14324

Also when I press the sumbit button the first time with no data in the fields it displays the same error as shown above. Then when I press the button again it does submit the empty fields to the database. I think angular finds it a problem that the fields are empty. Am I missing something? Putting text in the fields works fine and it also submits to the database. It's just with empty fields that their are problems.

var app = angular.module("sampleApp", ["firebase"]);
app.controller("SampleCtrl", function($scope, $firebaseArray) {
    var ref = firebase.database().ref().child("messages");
    $scope.loading = true;
    $firebaseArray(ref).$loaded().then(function(){
        $scope.loading = false;
        document.getElementById('loader').style.display = 'none';
    });
    $scope.messages = $firebaseArray(ref);
    $scope.addMessage = function() {
        $scope.messages.$add({
            name: $scope.name,
            company: $scope.company,
            reason: $scope.reason,
            wayofcontact: $scope.wayofcontact,
        });
        $scope.name = '';
        $scope.company = '';
        $scope.reason = '';
        $scope.wayofcontact = '';
        document.getElementById("name").focus();
    };
});

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Tutorial</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
    ul {
        list-style-type: none;
    }
    </style>
</head>
<body ng-controller="SampleCtrl" ng-cloak >
    <div class="container" ng-view>
        <div ng-show="loading">
            Loading...
        </div>
        <ul class="list-unstyled">
            <li ng-repeat="message in messages | filter:{name: '!!'}">
                <h1>{{message.name}}</h1>
                <p>
                    Bedrijf: {{message.company}}<br>
                    Reden: {{message.reason}}<br>
                    Email/telefoon: {{message.wayofcontact}}<br>
                </p>
                <button ng-click="messages.$remove(message)" class="btn btn-danger">Verwijder verzoek</button>
                <br><br>
            </li>
        </ul>
        <form ng-submit="addMessage()" novalidate>
            <div class="row">
                <div class="col-xs-6 form-group">
                    <input type="text" class="form-control" id="name" ng-model="name" placeholder="Naam" autofocus required/>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" ng-model="namecolleague" placeholder="Naam collega" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="company" placeholder="Bedrijf" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <textarea rows="3" type="text" class="form-control" ng-model="reason" placeholder="Reden van bellen" required></textarea>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="wayofcontact" placeholder="Email of nummer" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <button type="submit" class="btn btn-primary">Add Message</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxx"
    };
    firebase.initializeApp(config);
    </script>
</body>
</html>

Upvotes: 4

Answers (2)

georgeawg

Reputation: 48968

Attach an error handler to the $loaded() promise chain:

$firebaseArray(ref).$loaded().then(function(){
    $scope.loading = false;
    document.getElementById('loader').style.display = 'none';
}).catch(function (e) {
    console.log(e);
    throw e;
});

If the error is coming from that .then block, the console will show more detail.

AngularJS 1.6.0 has made errors in .then blocks less noisy. Unfortunately some details are lost. AngularJS 1.6.1 will have better error messages.

Due to c9dffde, possibly unhandled rejected promises will be logged to the $exceptionHandler. Normally, that means that an error will be logged to the console, but in tests $exceptionHandler will (by default) re-throw any exceptions. Tests that are affected by this change (e.g. tests that depend on specific order or number of messages in $exceptionHandler) will need to handle rejected promises.

-- AngularJS Developer Guide - Migrating to v1.6 - $q.

Possibly unhandled rejection -- Error when creating a form with angularjs

Answers (2)

Related Questions