The button transforms once the user submits the form

Question

The button transforms once the user submits the form

I have two buttons labeled "Save" and "Saving..."

<div ng-switch on="isLoading">
 <div ng-switch-when="true">
  <button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
 </div>

 <div ng-switch-when="false">
  <button type="submit" class="btn btn-primary btn-block" ng-disabled="!allowSubmit(addUser)" ng-click="add();">Save</button>
 </div>
</div>

My goal is to keep the button as 'Save' until the user clicks it, at which point it will change to 'Saving...' for a brief moment. I attempted using $timeout but it ended up delaying the entire form submission by 2 seconds.

    $dialogScope.add = function() {
                if ($dialogScope.user.password != $dialogScope.user.confirmpassword && $dialogScope.user.username) {
                    $dialogScope.hasError = true
                    $dialogScope.errorMessage = "Password does not match";
                    return $dialogScope.errorMessage;
                }
                var copy = angular.copy($dialogScope.user);
            }
            $timeout(function() {
                $dialogScope.hasError = false;
                $scope.users.push(copy);
                $dialogScope.closeThisDialog();
            }, 2000);

Any suggestions on how to achieve this without delaying the form submission?

javascript angularjs

Answer 1

Answer №1

Frankly speaking, I haven't had the chance to test it yet but a similar approach should do the trick.

$dialogScope.add = function() {
    if ($dialogScope.user.password != $dialogScope.user.confirmpassword &&
      $dialogScope.user.username) 
    {
        $dialogScope.hasError = true
        $dialogScope.errorMessage = "Password does not match";
        return $dialogScope.errorMessage;
    }
    var copy = angular.copy($dialogScope.user);

    $dialogScope.hasError = false;
    $scope.users.push(copy);
    $dialogScope.closeThisDialog();
    $scope.isLoading = true;

    $timeout(function() {
        $scope.isLoading = false;
    }, 2000);
}

If you have any feedback, please feel free to share.

Answer 2

Frankly speaking, I haven't had the chance to test it yet but a similar approach should do the trick.

$dialogScope.add = function() {
    if ($dialogScope.user.password != $dialogScope.user.confirmpassword &&
      $dialogScope.user.username) 
    {
        $dialogScope.hasError = true
        $dialogScope.errorMessage = "Password does not match";
        return $dialogScope.errorMessage;
    }
    var copy = angular.copy($dialogScope.user);

    $dialogScope.hasError = false;
    $scope.users.push(copy);
    $dialogScope.closeThisDialog();
    $scope.isLoading = true;

    $timeout(function() {
        $scope.isLoading = false;
    }, 2000);
}

If you have any feedback, please feel free to share.

Answer 3

Answer №2

Ng-switch might not be needed in this case.

Here is an alternative approach:

HTML:

<div ng-switch-when="true">
  <button type="button" class="btn btn-primary btn-block disabled">{{btnText}}</button>
</div>

JS:

$dialogScope.btnText = 'save';
$dialogScope.add = function() {
                if ($dialogScope.user.password != $dialogScope.user.confirmpassword && $dialogScope.user.username) {
                    $dialogScope.hasError = true
                    $dialogScope.errorMessage = "Password doesn't match";
                    return $dialogScope.errorMessage;
                }
                var copy = angular.copy($dialogScope.user);
                $dialogScope.btnText = 'saving...';
            }
            $timeout(function() {
                $dialogScope.hasError = false;
                $scope.users.push(copy);
                $dialogScope.closeThisDialog();
                $dialogScope.btnText = 'save';
            }, 2000);

Answer 4

Ng-switch might not be needed in this case.

Here is an alternative approach:

HTML:

<div ng-switch-when="true">
  <button type="button" class="btn btn-primary btn-block disabled">{{btnText}}</button>
</div>

JS:

$dialogScope.btnText = 'save';
$dialogScope.add = function() {
                if ($dialogScope.user.password != $dialogScope.user.confirmpassword && $dialogScope.user.username) {
                    $dialogScope.hasError = true
                    $dialogScope.errorMessage = "Password doesn't match";
                    return $dialogScope.errorMessage;
                }
                var copy = angular.copy($dialogScope.user);
                $dialogScope.btnText = 'saving...';
            }
            $timeout(function() {
                $dialogScope.hasError = false;
                $scope.users.push(copy);
                $dialogScope.closeThisDialog();
                $dialogScope.btnText = 'save';
            }, 2000);

Answer 5

Answer №3

To implement a loading icon while saving data, the button should display "Saving" during processing. This can be achieved by using a variable in your code.

Here is an example:

Before Button Click

$scope.loading = false;

On Button Click

$scope.loading = true;

HTML

<button type="submit" ng-disabled="myForm.$invalid">    
    <span data-ng-hide="loading"><i class="fa fa-save"></i>Save</span>
    <span data-ng-show="loading"><i class="fa fa-refresh fa-spin"></i>Saving</span>    
</button>

Answer 6

To implement a loading icon while saving data, the button should display "Saving" during processing. This can be achieved by using a variable in your code.

Here is an example:

Before Button Click

$scope.loading = false;

On Button Click

$scope.loading = true;

HTML

<button type="submit" ng-disabled="myForm.$invalid">    
    <span data-ng-hide="loading"><i class="fa fa-save"></i>Save</span>
    <span data-ng-show="loading"><i class="fa fa-refresh fa-spin"></i>Saving</span>    
</button>

The button transforms once the user submits the form

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Passport Google Oauth login redirection to successful route

Accessing a constant injected into an AngularJs controller from the controller's view: best practices

Sophisticated method in JavaScript to conceal and reveal div elements

Tools needed for Angular project development

Tips for overriding ng-disable in AngularJSUnleashing the

Encountered an Error with My Protractor Script - Object Expected

How can I ensure that the scripts returned in HTML via AJAX are executed when using $.load()?

Tips for zooming to the middle of a div element

The element type provided is not valid: it should be a string (for built-in components) or a class/function. Utilizing SSR with Node.js, React, and React-

I am encountering undefined values when utilizing momentjs within Angular

Google Interview Challenge: Finding Pairs that Sum Up

Is it possible to incorporate a function within a JSON object structure?

Page reloads are disabled when Chrome devtools debugger is paused in a React app

Getting a null value for active user after completing the sign-in process

How can I retrieve data using the angular method instead of the traditional $.ajax approach? Is $http a suitable replacement for $.ajax in Angular?

Is your preference selecting made a breeze by dragging the input field?

Incorrect JavaScript switch case usage

Tips for rearranging an item to the beginning of an array at index 0

Issue: It is necessary to utilize the `@babel/plugin-transform-runtime` plugin if you have set `babelHelpers` to "runtime" when using npm link

Examining a React component through unit testing using Jest and Enzyme