AngularJS: using a function in ng-disabled
I am using ng-disabled in my view as if I have valid 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 going to use the 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, for example form.$valid
and form.$pristine
another condition is easy like day == 0
, but other conditions are difficult for me.
source to share
Just enter it with $scope
where the form name is bound to $scope.nameOfForm
. I don't know where your other variables like day
or leaveapplication.reason
are defined, so I just added them to a dead end. You have to edit this part for it to work, but I think this will show you how to achieve what you are trying to do.
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 app
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 script
source to share
Try to pass the form in your function.
md-button.md-primary.md-raised ng-disabled="buttonChecker(formName)" ng-click="save(starts_on, ends_on, leave_type_id)" Apply
and click buttonChecker to check the form using
$scope.buttonChecker = function (formName) {
return formName.$invalid || formName.$pristine;
};
source to share