Using ng-disabled to enable/disable button

Question

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?

Tim Biegeleisen · Accepted Answer · 2016-08-04 11:22:17Z

2

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>

answered Aug 4, 2016 at 11:22

Tim Biegeleisen

526k32 gold badges323 silver badges399 bronze badges

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

2 Comments

Prashanth Damam Over a year ago

What if i have two conditions ng-disabled="inputForm.$invalid && !myController.input" . this does not work for me. Do You have any solution for this

Tim Biegeleisen Over a year ago

@PrashanthDamam You might want to open a new question in this case.

li0n_za · Accepted Answer · 2016-08-04 11:29:29Z

0

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

edited Aug 4, 2016 at 11:29

answered Aug 4, 2016 at 11:18

li0n_za

4552 silver badges15 bronze badges

1 Comment

Shorn Jacob Over a year ago

that wanted to disable the button when the form is valid. this was just a mock to understand the working

Collectives™ on Stack Overflow

Using ng-disabled to enable/disable button

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related