Very Basic Example - Enable or Disable a button

Question

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>

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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