Preloader on $http.post (multi-step form)

Question

I'm having trouble providing a preloader in my form. I've followed this tutorial to create a multi-step form in my laravel project.

This is my basic form.html:

<form id="appointment-form" name="appointmentform" ng-submit="processForm(appointmentform.$valid)">
    <!-- our nested state views will be injected here -->
    <div id="form-views" ui-view></div>
</form>

My first step form is form.license.html:

<!-- form-license.html -->
<label>Nummerplaat ingeven</label>
<div class="form-group">
    <div class="col-xs-8 col-xs-offset-2">
        <input required type="text" class="form-control" name="license" ng-model="formData.license">

    </div>
</div>

<div class="form-group row">
    <div class="col-xs-4 col-xs-offset-4">
        <a ng-click="next(1)" ui-sref="form.profile" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
            Volgende
        </a>
    </div>
</div>

In my controller I have the following:

$scope.next = function(step){

    if(step == 1) // licensePlate
    {
        // receive customer data
        $http.post('/api/licenseplate', { license: $scope.formData.license })
            .success(function(data, status, headers, config){
                var item = data.item;

                console.log(item);

                if(item) // fill in the name, address, email and telephone number
                {
                     $scope.formData.profile.name = item.owner_name;
                     $scope.formData.profile.street = item.owner_street;
                     $scope.formData.profile.zipcode = item.owner_zipcode;
                     $scope.formData.profile.city = item.owner_city;
                     $scope.formData.profile.email = item.owner_email[0];
                     $scope.formData.profile.telephone = item.owner_tel_no[0];
                }
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
    else if(step == 2)
    {
        // save customer data

        // get calendar appointments
        var current_date = (m+1) + '/' + d + '/' + y;

        $http.post('/api/calendar', { date: current_date })
            .success(function(data, status, headers, config){
                console.log(data);

                var item = data.items.item;

                item.sort(function(a, b) {
                    return a.column_id - b.column_id;
                });

                $scope.calendarData.pop();
                $scope.calendarData.push(item);

            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });

    }
};

// function to process the form
$scope.processForm = function(isValid) {

    var appointment_date    = $scope.formData.appointment_date;
    var appointment_hour    = $scope.formData.appointment_hour;
    var column_id           = $scope.formData.column_id;
    var profile             = $scope.formData.profile;

    $http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
        .success(function(data, status, headers, config){
            $location.path('/form/success/');
        })
        .error(function(data, status, headers, config) {
            console.log("Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + headers +
                "<hr />config: " + config);
    });
};

As you can see I make a $http.post when step is equal to 1. Now when I click on next the second form directly loads. In only want to go to the second form if the http.post is successfully loaded.

I've tried do this with some angularjs preloader libraries ($http) but nothing worked. Does someone has a good example on how I can provide this?

Answer 1

You can redirect to the state form.profile from controller:

<div class="col-xs-4 col-xs-offset-4">
    <button ng-click="next(1)" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
        Volgende
    </button>
</div>

and in controller

$scope.next = function(step){

    if(step == 1) // licensePlate
    {
        // receive customer data
        $http.post('/api/licenseplate', { license: $scope.formData.license })
            .success(function(data, status, headers, config){
                var item = data.item;

                if(item) // fill in the name, address, email and telephone number
                {
                     $scope.formData.profile.name = item.owner_name;
                     $scope.formData.profile.street = item.owner_street;
                     $scope.formData.profile.zipcode = item.owner_zipcode;
                     $scope.formData.profile.city = item.owner_city;
                     $scope.formData.profile.email = item.owner_email[0];
                     $scope.formData.profile.telephone = item.owner_tel_no[0];
                }

                // go to form.profile
                $state.go('form.profile');
            })
            .error(function(data, status, headers, config) {
                console.log("Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + headers +
                    "<hr />config: " + config);
            });
    }
    else {
        ...
    }
}