Rotes Sternchen nach ng-Eingabe erforderlich (ohne Label)

Ich suche nach einer CSS-Regel, um ein rotes Sternchen nach den Eingaben mit dem ng-required-Attribut anzulegen.Rotes Sternchen nach ng-Eingabe erforderlich (ohne Label)

Die Sache ist, es gibt keine Beschriftung an diesen Eingängen, der Platzhalter wird als Bezeichnung verwendet.

Diese 2 Eingänge zum Beispiel:

<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="CACFirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/> 
    </div> 
</div>

Also versuchte ich mit :after aber ohne Erfolg zu spielen. Außerdem gilt :required nur für das Attribut required, nicht ng-required.

Quelle

2016-09-22 Ellone

Mögliches Duplikat [Kann ich das: nach dem Pseudo-Elemente auf einem Eingabefeld] (http: // Stackoverflow. com/questions/2587669/can-i-benutze-das-nach-pseudo-element-auf-einem-eingabefeld) –

Überprüfen Sie diese http://stackoverflow.com/questions/2587669/cani-i-use-the -nach-Pseudo-Element-auf-einem-Eingabefeld Es erklärt den Grund, warum Sie es nicht auf Eingabeelementen tun können, auch gibt es ein paar Ideen, wie Sie es durch Hinzufügen zusätzlicher Elemente führen können, aber Sie werden um Ihre Anweisung zu erweitern, oder erweitern Sie die ng-erforderlich. –

Ich habe versucht, CSS, und der Selektor scheint überhaupt nicht für Eingabeelemente zu arbeiten, während es für ein Div-Element funktioniert. Sie können die folgenden versuchen, und Sie werden sehen, dass der Stern nach dem div eingeführt wird und nicht nach dem 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:

Jsfiddle live example of problem

Meiner Meinung nach ist dies ein Job für Javascript. Mit Ihrem HTML, wird dieser Code funktioniert (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

Quelle

2016-09-22 09:17:34

Rotes Sternchen nach ng-Eingabe erforderlich (ohne Label)

Antwort

Verwandte Themen