Question

我已经实现了AngularJs验证，如下所示： -

   <input type="number" min="0" max="100" style="width:80px;" ng-model="admin.preSourceThreshold" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" required> %
            <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
            <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be Less Then 100</span>
            <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be greater Then 0</span>
            <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number</span>

但是当用户开始在文本框中输入内容时，错误信息会显示在文本框下方，看起来并不好。

如何在文本框下方的下拉列表中显示错误消息，如html5所需的消息。

Answer 1

Angular实际上可以操纵HTML5的验证弹出窗口。它有点参与，但相当强大。你可以在这里学习： http://www.ng-newsletter.com/posts/validations.html

您可以使用ng-blur属性设置一个额外的变量，以便在输入失去焦点后进行检查。

<input ng-blur="blurred=true" type="number" min="0" max="100" style="width:80px;" ng-model="admin.preSourceThreshold" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" required> %
        <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
        <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty && blurred">Number Should Be Less Then 100</span>
        <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty && blurred">Number Should Be greater Then 0</span>
        <span  style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty && blurred">Must Be Number</span>

另一种解决方案是在点击按钮之前不进行验证。

此处示例： http://plnkr.co/edit/b0d6IEymEnqj5hqRThNo?p=preview

Answer 2

这不是你想要的那个。但它是一个很好的，所以，我想发布这个，所有人都可以实现AngularJs提供的这个新东西。

AngularJS提供了xtForm指令，为表单验证提供了更好的性能和体验。我正在与所有人分享这个链接，以便我们更多地了解AngularJs。 http://www.brentmckendrick.com/code/xtform/

AngularJS - 下拉窗口中的错误消息，如html5验证

2 个答案: