angularJs disabling form buttons on submit

Question

in my Angular 1.x app I am getting a list of Offers via an api call to my backend.

For each Offer returned in the reply I am creating an ng-form. I then display the forms in a modal and I want to be able to disable each form's submit button when it has been clicked to avoid multiple clicks whilst the form data is posted to the back end.

This seems tricky since the number of Offers is an unknown, therefore I'm not sure how I can initialize a variable for each Offer in order to disable the button.

The task would be far more straight forward if I just had one single form, I colud set:

$scope.disableButton = true

... then use ng-disabled on the button

Thusfar I am displaying my forms as follows:

<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]" class="row ng-cloak">

     ....
     <button type="button" ng-click="offerRespond(messageForm[$index])" ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons">Submit</button>

</div>

Then in my controller's offerRespond function:

offer = this;
offer.i.disableButtons = true;

This doesn't work of course but it is as close as I can get.

A hack would be to parse the Offers object before passing it to the frontend but that just seems like a horrible hack.

Why not pass either the index or the object instance into offerRespond and track the state of the button there? It is hard to say exactly what you should write to disable/enable the button again but if you provide some code for offerRespond that would help. — Igor
– Igor, Commented Feb 20, 2019 at 20:40

Pop-A-Stash · Accepted Answer · 2019-02-20 21:08:05Z

1

Actually I almost had the answer in my implementation, I just was referring to my variables in correctly:

ng-disabled="!messageForm[$index].$valid || offer.i.disableButtons"

should have been

ng-disabled="!messageForm[$index].$valid || i.disableButtons"

Thanks to @igor for giving me an idea to test which enabled me to revealed the answer myself.

edited Feb 20, 2019 at 21:08

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

answered Feb 20, 2019 at 20:58

Alan A

2,5516 gold badges34 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

angularJs disabling form buttons on 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