AngularJS : submit disabled until HTML 5 valid and disable after submit prevent multi submit

Question

I am trying to keep my submit button disabled until form is HTML valid which I have managed to do like so:

<button type="submit" class="btn" ng-disabled="mainPaymentForm" ng-click="disableButton()"><%button%></button>

In my controller I have this:

// Disable form on submit
$scope.disableButton = function(){
        $scope.button = "Loading...";
        $scope.submit.disable = true; // This doesn't work
};

Overall I am just trying to keep button disabled until valid / and prevent multiple submit clicks once valid.

Thanks

IamCavic · Accepted Answer · 2015-11-03 23:28:52Z

1

I figured it out:

HTML code

ng-disabled="mainPaymentForm.$invalid || clickDisable"

JS controller code

// this will unable button if form becomes valid
$scope.$watch('mainPaymentForm.$invalid', function(){
        $scope.clickDisable = false;
});

// this will disable it on click
$scope.disableButton = function(){
        $scope.button = "Loading...";
        $scope.clickDisable = true;
};

answered Nov 3, 2015 at 23:28

IamCavic

3762 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

AngularJS : submit disabled until HTML 5 valid and disable after submit prevent multi submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related