输入文本为空时，Angular JS 禁用按钮

Question

I start in angular JS and I want to disable (attribute "ng-disabled") a button while my input text "login" and "password" are empty. The problem is that, by default the text of input-text "login" is "LOGIN" and the text of input-text "password" is "PASSWORD", so my inputs are never empty...

Help,

Thanks

Answer 1

Simply use a placeholder instead of populating it with something

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.pass = ""; // empty, instead of "PASSWORD" $scope.foo = () => { console.log($scope.pass); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <input placeholder="PASSWORD" ng-model="pass"> <button ng-click="foo()" ng-disabled="!pass">Sign in</button> </div>

Here is another example that suits your description, where you can populate it with some text, but still have the button disabled. It uses ng-focus to reset the input field if it is selected, and it has $dirty checking, to only allow to press the button when the input has been altered/changed.

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.pass = "PASSWORD"; $scope.foo = () => { console.log($scope.pass); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <form name="form"> <input ng-focus="pass=''" name="pass" ng-model="pass"> <button ng-click="foo()" ng-disabled="!form.pass.$dirty || !pass">Sign in</button> </form> </div>