Show red star for invalid fields

Question

I want to add a red star before invalid text inputs. Something like

.ng-invalid:before
    { 
        content: "*"; 
        color: Red; 
    }

unfortunately it seems that :before doesn't always work for input. How to do?

http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field — haki, Jun 25 '14 at 12:35

JJJ · Answer 1 · 2014-06-25T12:40:04.720

0

removed

edit

You need to put the elements in a div and give that the :before properties, or just have it in a separate element (the *) which uses ng-show for validity.

Misunderstood the question initially, but yes, this.

edited Jun 25 '14 at 12:40

answered Jun 25 '14 at 12:34

JJJ

340
1
8

Suppose I put the input element in a div. How am I going to select this div, since css doesn't have parent selectors. – jivangilad Jun 25 '14 at 13:04
You would have to change your way of going about this (e.g. by having a red border instead), or use an `ng-show` condition on a class or element for when `$invalid` is true for that control. – JJJ Jun 25 '14 at 14:44

score 0 · Answer 2 · answered Jun 26 '14 at 10:08

Thanks. In order to make the solution reusable, I have created the directive: ngErrorShow It adds a star element before the input, and uses ngShow, to show/ hide the star.

portaldirectives.directive("ngErrorShow", function ($compile) { 
    return { 
        restrict: 'A', 
        require: "^form", 
        link: function (scope, element, attrs, ctrl) { 
            var varName = ctrl.$name + "." + attrs.name + ".$valid";           
            var a_input = angular.element($compile('<span style="color:red" ng-show="!' + varName + '" >*</span>')(scope)); 
            element.parent().prepend(a_input); 
        } 
    }; 
});

Show red star for invalid fields

2 Answers2