AngularJS - Submit button not disabling (im a newbie)

Question

I know I'm doing something wrong, but here is the code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form>
    <input type="submit" ng-disabled="false" value="Not Disabled"/> <!-- Shouldn't be disabled -->
    <br>
    <input type="submit" ng-disabled="true" value="Disabled"/> <!-- Should be disabled -->
</form>

Why isn't the second submit button disabled? I searched online and I thought you could use ng-disabled to have a boolean as the disabled attribute.
Thanks.

Unmitigated · Accepted Answer · 2018-07-24T23:05:36.763

1

The button will only be disabled if the expression evaluates to true and the parent element has the ng-app attribute.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form>
    <input type="submit" ng-disabled="false" value="Not Disabled"/> <!-- Shouldn't be disabled -->
    <br>
    <div ng-app ng-init="disableBtn=true">
<input type="submit" ng-disabled="disableBtn" value="Disabled"/> <!-- Should be disabled -->
</div>
    
</form>

edited Jul 24 '18 at 23:05

answered Jul 24 '18 at 19:09

Unmitigated

76,500
11
62
80

Thank you, it works. I will tick your answer as soon as I can (I need to wait 10 minutes) – MBJH Jul 24 '18 at 19:10
@MBJH No problem. – Unmitigated Jul 24 '18 at 19:11

score 0 · Answer 2 · answered Jul 24 '18 at 22:07

The code needs an ng-app directive to boot AngularJS. Otherwise the ng-disabled directive will not be compiled:

̶<̶f̶o̶r̶m̶>̶
<form ng-app>

The DEMO

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form ng-app>
    <input type="submit" ng-disabled="false" value="Not Disabled"/> <!-- Shouldn't be disabled -->
    <br>
    <input type="submit" ng-disabled="true" value="Disabled"/> <!-- Should be disabled -->
</form>

AngularJS - Submit button not disabling (im a newbie)

2 Answers2

The DEMO