2017-02-14 6 views
0

Angular 2 (2.0.0) + TS.Nummer Validierung in Winkel 2

Ich muss Validierungsregeln mit <input> Tag in Spalte der Tabelle festlegen.

Um zB, habe ich einigen Tisch und Eingang:

<table> 
    <tr> 
    <td>Values: {{ dataFromServer }}</td> 
    </tr> 
</table> 
<input type="number" placeholder="maxvalue"> 
<input type="number" placeholder="minvalue"> 

dataFromServer Wert ist, den ich vom Server erhalten, und ist gleich 255.

Ich füge maxvalue = 100 und minvalue = 20, und dann Values: 255 wurde rot. Wie implementiert man das? Oder gib mir bitte ein paar interessante Beispiele.

Antwort

2

Ändern Sie HTML-Code, wie diese

<table> 
    <tr> 
     <td ng-class="{'colorRed': dataFromServer > maxvalue || dataFromServer < minvalue }">Values: {{ dataFromServer }}</td> 
    </tr> 
</table> 
<input type="number" placeholder="maxvalue" ng-model="maxvalue"> 
<input type="number" placeholder="minvalue" ng-model="minvalue"> 

und CSS hinzufügen, wie

.colorRed { 
    color:red; 
}