CODEWITHSUNDEEP
angularjs
coure2011
coure2011

Reputation: 42534

ng-disabled not working properly

I have created a directive to allow tab into a text field, Its also required. The problem is error is showing/hiding correctly but the button is not getting disabled even the form is invalid. Check the js fiddle here http://jsfiddle.net/c5omqx4t/3/

Steps to reproduce:

1) Select input box
2) Press Tab key
3) Press Backspace key
issue: Error is still here but the button is enabled

here is the html code

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-if="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     
        </div>
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />
        </form>
    </div>

Upvotes: 0

Views: 738

Answers (2)

Raja Jaganathan
Raja Jaganathan

Reputation: 36237

Solution 1:

Just use ng-show instead of ng-if. Because ng-if create a new scope here.

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-show="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     
        </div>
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />
        </form>
    </div>

Demo link

Solution 2:

or just pull input go field into inside DIV tags

Demo link2

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-if="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>   
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />  
        </div>

        </form>
    </div>

Solution 3:

Use controller as syntax to acheive this. Also small changes in helloController. Note that this.providerMediumType instead of $scope.providerMediumType. 

<body ng-app="HelloApp">
    <div ng-controller="helloController as vm">
        <h1>{{hello}}</h1>
        <form name="createForm" method="POST" action="/form.php">
            <div ng-if="vm.providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="vm.cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     

        </div>
            <input type="submit" ng-disabled="createForm.$invalid" value="Go" />

        </form>
    </div>
</body>



angular.module('HelloApp', ['components']).controller('helloController',helloController);

function helloController($scope) {
    $scope.hello = 'Hello Me!';
    this.providerMediumType = 'XML_API';    
}

Demo with ng-if

Upvotes: 3

coure2011
coure2011

Reputation: 42534

Found the solution. In directive use c.$apply() instead of c.$digest()

Upvotes: 0

Related Questions