AngularJS: Using function in ng-disabled

Question

I'm using ng-disabled in my view like this I have truthy conditions

 md-button.md-primary.md-raised flex="20" ng-disabled="form.$invalid || form.$pristine || day == 0 || leaveapplication.reason == null" ng-click="save(starts_on, ends_on, leave_type_id, period1, period2)" Apply

So I'm gonna use function in my ng-disabled this time:

 md-button.md-primary.md-raised ng-disabled="buttonChecker()" ng-click="save(starts_on, ends_on, leave_type_id)" Apply

Now how can I put my condition in my function like form.$valid and form.$pristine the other condition is easy like day == 0, but the other conditions are hard for me.

are you asking, how would you be ale to access form from function ? — Sachet Gupta
– Sachet Gupta, Commented Apr 17, 2017 at 10:14

lin · Accepted Answer · 2017-04-17 10:43:38Z

2

Just access it with $scope where the name of the form is binded to $scope.nameOfForm. I don't know where your other variables like day or leaveapplication.reason are defined so I just inserted them blankly. You have to edit this part to make it work but I think this will show you how to achieve what you trying to.

View

<div ng-controller="MyCtrl">
  <form name="myForm">
      <input type="text" name="test" ng-model="test">
      <button ng-disabled="buttonChecker();">
        Some Button
      </button>
  </form>
</div>

AngularJS Application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.buttonChecker = function () {
      return $scope.myForm.$invalid 
                || $scope.myForm.$pristine 
                || $scope.day === 0 
                || $scope.leaveapplication.reason === null;
    };
});

> Demo fiddle

edited Apr 17, 2017 at 10:43

answered Apr 17, 2017 at 10:16

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

ImpostorIsAsking Over a year ago

let me try this

ImpostorIsAsking Over a year ago

Myform is the name of the form??

lin Over a year ago

Yea, as you can see in the HTML markup. <form name="myForm">

ImpostorIsAsking Over a year ago

he cant read my function when a load the page its already enable not disabled

ImpostorIsAsking Over a year ago

yes i will mark this right if it is working do u have plunker?

|

Jhim · Accepted Answer · 2017-04-17 11:12:23Z

0

Try passing the form on your function.

 md-button.md-primary.md-raised ng-disabled="buttonChecker(formName)" ng-click="save(starts_on, ends_on, leave_type_id)" Apply

and have the buttonChecker check the form using

$scope.buttonChecker = function (formName) {
  return formName.$invalid || formName.$pristine;      
};

answered Apr 17, 2017 at 11:12

Jhim

448 bronze badges

Collectives™ on Stack Overflow

AngularJS: Using function in ng-disabled

2 Answers 2

> Demo fiddle

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

> Demo fiddle

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related