CODEWITHSUNDEEP
javascriptangularjs
Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

How to disable a button when input has invalid value

I am trying to disable a button, depending if the OptionsDisplayValue has some text in it (thus meets the required dependency)

The below doesn't appear to work, and I am not entirely sure why. As when I write {{AddAttribute.OptionsDisplayValue.$invalid}} it is returning true.

So I would have thought ng-disabled="true" would have worked.

<html ng-app>    
    <body>
        <form id="AddAttribute" name="AddAttribute">
            <input type="text" class="form-control" 
              placeholder="Display Name" required="required" 
              ng-model="OptionsDisplayValue" 
              id="OptionsDisplayValue" name="OptionsDisplayValue" />

            <input type="button" class="btn btn-primary" value="Add" 
              id="AddOption" name="AddOption" 
              ng-model="AddOption" 
              ng-disable="AddAttribute.OptionsDisplayValue.$invalid" />

            {{AddAttribute.OptionsDisplayValue.$invalid}}
        </form>
    </body>
</html>

I am guessing my understanding of how ng-disabled works is miss informed. I have used the checkbox example from the ngDisabled docs, and that appears to work.

How would I go about using the validity of the input as the disabling factor?

Upvotes: 0

Views: 77

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Use have missed to add d at the end from disable

It should be ng-disabled instead of ng-disable

Markpup

ng-disabled="AddAttribute.OptionsDisplayValue.$invalid"

Upvotes: 3

Default
Default

Reputation: 16518

Your code is using ng-disable, which is a misspelling of the actual directive ng-disabled.

Upvotes: 2

Related Questions