角度2中的数字验证

时间:2017-02-14 12:44:28

标签: validation angular

Angular 2(2.0.0)+ TS。

我必须在表格列中使用<input>标记设置验证规则。

对于示例,我有一些表和输入:

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

dataFromServer是一个值,我从服务器获取,并且等于255

我添加maxvalue = 100minvalue = 20,然后Values: 255变红了。怎么实现这个?或者请给我一些有趣的例子。

1 个答案:

答案 0 :(得分:2)

像这样改变你的HTML代码

<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">

添加css,如

.colorRed {
    color:red;
}