ngMessages根据max或min属性显示输入数字的动态错误

时间:2016-07-22 01:39:46

标签: angularjs html5 validation max ng-messages

我一直试图找出有关如何使用角度验证来显示消息但有特定最小或最大属性的信息。

如果我的input[type="number"]字段包含min=1max=10等属性,并且用户输入11我想要一条验证消息:"The number should be less than 10"。但是10号应该动态地从max属性中获取。

我想将消息放在单独的模板中。 我有以下内容:

<!-- default ng-messages -->
<script type="text/ng-template" id="common-messages">
    <span ng-message="required" class="help-block">This field is required</span>
    <span ng-message="maxlength" class="help-block">Must be no longer than {{maxlength}} characters</span>
    <span ng-message="min" class="help-block">This number must be greater than {{min}}.</span>
    <span ng-message="max" class="help-block">This number must be less than {{max}}.</span>
    <span ng-message="number" class="help-block">A number is required</span>
    <span ng-message="date" class="help-block">A date is required</span>
</script>

然后以表格

<div class="container" ng-controller="app.packaging.PackagingAddController as package">
    <form name="packageForm" ng-submit="package.save()" role="form" novalidate class="form-horizontal">
        <input type="text" name="packageCount" ng-model="package.model.packageCount" class="form-control" max="10 " />
        <div ng-messages="packageForm.packageCount.$error" role="alert" ng-show="packageForm.$submitted || packageForm.packageCount.$touched" ng-messages-multiple>
              <div ng-messages-include="common-messages"></div>
        </div>
    </form>
</div>

问题是显示的错误是This number must be less than .,因此未注入{{max}}。有没有办法实现这一点,以便我可以重用common-messages模板?

PS:这个帖子How to get min and max values of input angularjs对我的问题没用,因为它不重用模板,也不从html输入max属性读取。

0 个答案:

没有答案