How to toggle button's state in angular.js?

Question

What I'm trying to do is to enable submit button If all of the textboxes hold values in them. Disable the submit button otherwise. But the problem here is the number of textboxes may vary (dynamic) so I can not hardcode the models in ng-disabled attribute.

This is what I've tried so far: http://jsfiddle.net/codef0rmer/6uKAT/

Is there any other approach I should follow?

Ben Lesh · Accepted Answer · 2012-10-12 13:25:38Z

74

This is the basic idea.

<form name="myForm">
     Item1: <input ng-model="item1" required/><br/>
     Item2: <input ng-model="item2" required/><br/>
     Item3: <input ng-model="item3" required/><br/>
     <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

answered Oct 12, 2012 at 13:25

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

2 Comments

codef0rmer Over a year ago

That's definitely a go but in my case the submit button ($rootScope) does not come under the same controller that of the text-boxes.

Ben Lesh Over a year ago

It shouldn't matter, as long as the form wraps all of the inputs you want to look at to disable the submission.

Tosh · Accepted Answer · 2012-10-12 06:41:21Z

4

You want to use validation. http://docs.angularjs.org/api/ng.directive:form

Put all the input field with required attributes, then any empty input element would make the form invalid. If invalid, then disable the button with ng-disable.

answered Oct 12, 2012 at 6:41

Tosh

36k11 gold badges67 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to toggle button's state in angular.js?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related