I use angularjs and I DO NOT have a <form> (IMPORTANT!!!)
My template html is:
<tr ng-repeat="usage in usages">
<td>
<input class="form-control" type="number" ng-model="usage.calls" required/>
</td>
<td>
<a href="" ng-disabled="disabled()" class="btn btn-primary btn-xs glyphicon glyphicon-saved" ng-click="save(usage)"></a>
</td>
</tr>
I want change CSS on <input> if empty and put disabled save action.
You can use ng-class and test for undefined.
Also, you need to use a button for the disabled attribute to work.
Check below:
angular.module("myApp", [])
.controller("myCtrl", function($scope, $filter) {
$scope.usages = [{
calls: 1
},{
calls: 2
},{
calls: 3
}];
$scope.isDefined = function(value) {
return typeof value !== 'undefined';
}
$scope.save = function(usage) {
console.log(usage)
}
}).err{ border: 2px solid red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="usage in usages">
<td>
<input class="form-control" type="number" ng-class="{'err': !isDefined(usage.calls)}" ng-model="usage.calls" required/>
</td>
<td>
<button ng-disabled="!isDefined(usage.calls)" class="btn btn-primary btn-xs glyphicon glyphicon-saved" ng-click="save(usage)">Save</button>
</td>
</tr>
</table>
</div>