Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview
The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change the color of that value to red?
In other words, positive numbers should appear normally, but when a negative number is entered, the text color should turn red.
Is there a way to achieve this functionality?
Here is the HTML code snippet:
<div ng-controller="MainCtrl">
<input type="text" ng-model="amount" format="number" />
</div>
And here's the JavaScript directive code:
var app = angular.module('App',[]);
app.controller('MainCtrl', function ($scope) {
});
app.directive('format', ['$filter', function ($filter) {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.format)(ctrl.$modelValue);
});
ctrl.$parsers.unshift(function (viewValue) {
var plainNumber = viewValue.replace(/[^\d|\-+]/g, '');
elem.val($filter('number')(plainNumber/100,2));
return plainNumber;
});
}
};
}]);
Regarding the style override concern mentioned below, here is the issue:
The actual HTML code contains:
<div class="Ip"><input type="text" ng-model="amount" format="number" /></div>
The CSS is applied through SCSS for the class Ip. Here is the relevant snippet:
$font:#fff; //this font gets overwritten. even if i exclude this font of bootstrap is there which will overwite the class mentioned in directive.
.inputCl{
color:$font;
}
.Ip{
input{
@extend .inputCl;
}
}