Ellone Ellone - 2 months ago 22
AngularJS Question

Red asterisk after ng-required input (without label)

I'm looking for a CSS rule to apply a red asterisk after the inputs with the

ng-required
attribute.

The thing is, there is no label on those inputs, the placeholder is used as a label.

Those 2 inputs for instance :

<div class="row">
<div class="col-xs-6">
<input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
</div>
<div class="col-xs-6">
<input type="text" name="CACirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
</div>
</div>


So I tried to play with
:after
but without success. Also, the
:required
only apply to the
required
attribute, not
ng-required
.

Answer

I tried CSS, and the selector does not seem to work at all for input elements while it will work for a div element. You can try the following, and you will see that the asterisk is inserted after the div and not after the input:

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

<div class="text-div" ng-required="true">
  TEST DIV LOOK -->
</div>

CSS:

[ng-required]:after {
  content: "*"
}

OUTPUT:

enter image description here

Jsfiddle live example of problem

In my opinion this is a job for javascript. With your html, this code will work (native JS):

var form_inputs = document.getElementsByClassName('form-control')

for ( var i = 0; i < form_inputs.length; i ++ ) {
    if ( form_inputs[i].hasAttribute('ng-required') ) {
    form_inputs[i].insertAdjacentHTML('afterend', '<span style='color: red;'>*</span>');
  }
}

Jsfiddle solution