CODEWITHSUNDEEP
javascriptangularjsangularjs-forms
user10111311
user10111311

Reputation: 1

Very Basic Example - Enable or Disable a button

I have this very basic example. This should work in a form for multiple inputs as well.

I want a form without any required parameters. But I only want to enable the button if at least one of them is not empty.

$pristine almost works. The problem is that if I type something and delete it the button remains enabled.

Basically,

If all fields are empty -> button disabled

Else if at least one not empty -> button enabled

function ctrl($scope){
    
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' ng-model='myName'/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="myForm.$pristine" />
    {{myForm.$pristine}}
</form>
</div>

Upvotes: 0

Views: 76

Answers (4)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21756

Use disabled="!name.length" instead of ng-disabled="myForm.$pristine".

This will solve your issue. Below is working code:

function ctrl($scope) {

}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="myForm" ng-controller="ctrl">
  
    <input type="text" ng-model="name" name='myName' ng-model='myName' />
    
    <span>{{name}}</span>
    
    <input type="submit" value="Submit" ng-disabled="!name.length" />
    
 {{myForm.myName.$pristine}}
  </form>
  
</div>

Upvotes: 0

sridhar..
sridhar..

Reputation: 2123

This is naive way, but you can just use ng-model of each input in ng-disabled 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' />
    <input type="text" ng-model="fName" name='FirstName'/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="!(name || fName)" />
    {{myForm.$pristine}}
</form>
</div>

Also, your code has 2 ng-model for the same input

Upvotes: 0

Hardik Shah
Hardik Shah

Reputation: 4200

With `required`: 

    function ctrl($scope) {
       
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app>
    <form name="myForm" ng-controller="ctrl">
        <input type="text" ng-model="name" name='myName' ng-model='myName' required/>
        <span>{{name}}</span>
        <input type="submit" value="Submit"  ng-disabled="myForm.$invalid"/>
    </form>
    </div>

Without required using controller:

function ctrl($scope) {
    $scope.isDisable = true;
    $scope.validate = function(){
      if($scope.name == undefined || $scope.name == ""){
            $scope.isDisable = true;
      } else {
            $scope.isDisable = false;
      }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<form name="myForm" ng-controller="ctrl">
    <input type="text" ng-model="name" name='myName' ng-model='myName' ng-keyup = "validate()"/>
    <span>{{name}}</span>
    <input type="submit" value="Submit"  ng-disabled="isDisable"/>
</form>
</div>

Another way using `name.length`:

function ctrl($scope) {
           
}
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

        <div ng-app>
        <form name="myForm" ng-controller="ctrl">
            <input type="text" ng-model="name" name='myName'/>
            <span>{{name}}</span>
            <input type="submit" value="Submit"  ng-disabled="!name.length"/>{{name.length}}
        </form>
        </div>

Note: If you don't want to use HTML5 validation that you can mark your form novalidate.

Upvotes: 0

S M
S M

Reputation: 41

Pristine checks whether the input field is touched or not. That's why it remains enabled after you deleted your input. Check on valid and provide some condition. Or use pattern and regex.

Upvotes: 1

Related Questions