How To Disable a Button?

ionic-v1
1

I’m trying to disable a log-in button until a user name and password are entered and I have a tag like this:

<button class="button button-block button-positive" ng-click="signIn()" ng-disabled="{{ signInDisabled }}">Log-In</button>

The controller code looks something like this:

angular.module('ionicApp').controller('LoginController', function ($scope, $state, $ionicLoading, logInService) {

    $scope.signInDisabled = true;
    $scope.userCredentials = {
        username: "",
        password: ""
    };

    $scope.updateSignInButtonState = function () {
        $scope.signInDisabled = $scope.userCredentials.username.length == 0 || $scope.userCredentials.password.length == 0;
        console.log($scope.signInDisabled);
    };

Whenever the user name or password changes (ng-change) the updateSignInButtonState() is called and updates $scope.signInDisabled. The HTML looks like so:

<div class="list">

    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text" ng-change="updateSignInButtonState()" ng-model="userCredentials.username">
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" ng-change="updateSignInButtonState()"
               ng-model="userCredentials.password">
    </label>

</div>

The log statement shows that the variable is changing, but the button enabled state never changes.

Any idea on how to enable the button when $scope.signInDisabled changes to false? Thanks.

2

there is a simple version

what i did in one of my Applications:
create a method:

$scope.isFormDisabled = function(){
    return this.form.$invalid;
}

and in html use a Form tag or if you cant, use ng-form (i used ng-form because its asp.net page).

<ng-form name="form" >
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text" ng-model="userCredentials.username" required>
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-model="userCredentials.password" required>
    </label>
  </div>
</ng-form>

and the important thing add required to your input fields.

let me know if it does not work

3

Thanks! That did work, and it gave me the clue I needed to optimize it even further. Here’s the HTML that I ended up with:

<ion-view title="Sign-in">
    <ion-content>

        <form name="credentialsForm" ng-submit="signIn()">

            <div class="list">

                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="text" required ng-minlength="3" ng-model="userCredentials.username">
                </label>

                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" required ng-minlength="3" ng-model="userCredentials.password">
                </label>

            </div>

            <div class="padding">

                <button class="button button-block button-positive" ng-click="signIn()"
                        ng-disabled="credentialsForm.$invalid">Sign-In</button>

                <p class="text-center">
                    <a href="#/forgot-password">Forgot password</a>
                </p>

            </div>

        </form>

    </ion-content>
</ion-view>
4

its not work for me. please help were i want call the function isform dissabled().

6

<button class="button button-block button-positive" ng-click="signIn()" ng-disabled="credentialsForm.$invalid">Sign-In</button>

indent preformatted text by 4 spaces use ng-disabled.If it evaluates to true the button will be disabled.credentialsForm.$invalid will return true if form is invalid>so button will be enabled only after form is valid