Style font for input field (Angularjs)

Question

here is the plunker link-> http://plnkr.co/edit/iFnjcq?p=preview

As you can see in the link, it performs validation of input field. only numbers are allowed to enter and it adds commas automatically.

My question is-> if i give a negative number in that field, how can i change the color of the value entered in that field automatically.

i.e A positive number should display as it is. when user enters negative, numbers get entered with red color of the text.

Is there any way i can achieve this guys ??

HTML-

<div ng-controller="MainCtrl">
  <input type="text" ng-model="amount" format="number" />
</div>

JS directive

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 overwrite issue discussed below, here is the problem.

The actual HTML Code

<div class="Ip"><input type="text" ng-model="amount" format="number" /></div>

The CSS is applied through scss for the class Ip. Here it is

$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;                         
}

}

mcgraphix · Accepted Answer · 2015-12-05 01:05:14Z

1

When you apply the formatting just check to see if it negative and add a css class as necessary

ctrl.$parsers.unshift(function (viewValue) {
        var plainNumber = viewValue.replace(/[^\d|\-+]/g, '');
        elem.val($filter('number')(plainNumber/100,2));
        if (plainNumber < 0) {
           elem.addClass('negative');
        } else {
            elem.removeClass('negative');
        }
        return plainNumber;
    });

http://plnkr.co/edit/GdneR70Rw6RtTbwMrfx4?p=preview

Your SASS

$font:#fff; 
$fontNegative:#ff0000;   

.inputCl{
    color:$font;
}

.Ip{                     
    input{
          @extend .inputCl;                         
    }
    input.negative {
         color: $fontNegative;    
    }

}

edited Dec 5, 2015 at 1:05

answered Dec 4, 2015 at 18:55

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

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

8 Comments

Ayesha Over a year ago

this input type is inside a div. so css of div is overwriting to the css mentioned by us in the directive. How can i not let it overwrite ?

mcgraphix Over a year ago

can you post the css you are using? CSS has a concept of specificity where the CSS with the highest specificity will "win". I would need to see your css to see what might be causing the override issue.

mcgraphix Over a year ago

This should do it then: .Ip input.negative { color: #ff0000}

mcgraphix Over a year ago

I'm not an expert on SASS but I think in your case it would be: $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; } input.negative { color: #ff0000; } }

mcgraphix Over a year ago

Let us continue this discussion in chat.

|

dfsq · Accepted Answer · 2015-12-04 18:59:50Z

1

You could add couple of conditions to your existing format directive, but this is not cool: directive should be focused and does its own single thing, like formatting.

Instead, create one more very simple directive to just add new validation constraint. Let's call it positive directive:

.directive('positive', [function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$validators.positive = function(value) {
                return value && value >= 0;
            };
        }
    };
}]);

then the usage would be

<input type="text" ng-model="amount" format="number" positive />

After that you can style valid/invalid state of the input using .ng-invalid-positive class that will be added by Angular for your depending on the current input:

.ng-invalid-positive {
    color: red;
}

Demo: http://plnkr.co/edit/2RAlx0DoFH1HEmdT0XCv?p=preview

answered Dec 4, 2015 at 18:59

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Ayesha Over a year ago

@dfsq- this input type is inside a div. so css of div is overwriting to the css mentioned by us in the directive. How can i not let it overwrite ?

Collectives™ on Stack Overflow

Style font for input field (Angularjs)

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related