CODEWITHSUNDEEP
angularjs
Shorn Jacob
Shorn Jacob

Reputation: 1251

Using ng-disabled to enable/disable button

I am using ng-disabled in submit button of the form. When I fill in the field, the inputForm.$valid should be true and the ng-enable should get this true value, thereby enabling the button.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="">

    <form name="inputForm" >
        <div>
            <label>Name</label>
            <input type="text" name="name" required />
        </div>
        <div>
            <label>Email</label>
            <input type="text" name="email" required/>
        </div>

        <button type="submit" ng-disabled="{{inputForm.$valid}}">
            Submit
        </button>
    </form>

    {{inputForm.$valid}}
    {{inputForm.$invalid}}
    {{inputForm.$dirty}}
    {{inputForm.$pristine}}
</body>
</html>

but the button is not getting enabled even when the fields are typed in. what am i doing wrong?

Upvotes: 1

Views: 8647

Answers (2)

li0n_za
li0n_za

Reputation: 455

Change ng-disabled="inputForm.$valid to ng-disabled="inputForm.$invalid or ng-disabled="!inputForm.$valid, you are disabling the button when the form is valid

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 520888

You should be using:

ng-disabled="inputForm.$invalid"

in order to disable the form whenever the form is invalid. Note that you don't place the invalid property in brackets.

Full <form> code:

<form name="inputForm" >
    <div>
        <label>Name</label>
        <input type="text" name="name" required />
    </div>
    <div>
        <label>Email</label>
        <input type="text" name="email" required/>
    </div>

    <button type="submit" ng-disabled="inputForm.$invalid">
        Submit
    </button>
</form>

Upvotes: 2

Related Questions