javascript - AngularJs $invalid 在这种情况下不起作用

Question

你好，
我在表单验证方面遇到问题。
我有以下代码:

<div>
<form name="formRankMax">
    <div class="input-group" ng-class="{ 'has-error': formRankMax.inputMax.$invalid && formRankMax.inputMax.$invalid }">
        <span class="input-group-addon">Max</span>
        <input class="form-control has-feedback" name="inputMax" type="number" placeholder="Maximum" ng-model="selectedItem.range.max" min="{{selectedItem.range.min}}" >
    </div>
</form>

<div>
<form name="formRankMin">
    <div class="input-group" ng-class="{ 'has-error': formRankMin.inputMin.$dirty && formRankMin.inputMin.$invalid }">
        <span class="input-group-addon">Min</span>
        <input class="form-control has-feedback" name="inputMin" type="number" placeholder="Maximum" ng-model="selectedItem.range.min" min="0" max="{{selectedItem.range.max}}" >
    </div>
</form>

正如您所看到的，“inputMax”的最小值与“inputMin”的 ng-model 中的最小值相同。
但是，当我在“inputMin”中输入示例 10 并在“inputMax”中输入 9 时，验证不起作用。 (但有一个工具提示告诉我输入另一个值)

你有办法让它发挥作用吗？
预先感谢您

Answer 1

好吧，我不确定您到底想要实现什么，但是代码的以下部分看起来像是您在复制粘贴时意外忘记更改属性；

<div class="input-group" ng-class="{ 'has-error': formRankMax.inputMax.$invalid && formRankMax.inputMax.$invalid }">

这可能应该是

<div class="input-group" ng-class="{ 'has-error': formRankMax.inputMax.$dirty && formRankMax.inputMax.$invalid }">

此外，当使用 AngularJS 表单验证时，建议在表单元素上设置 novalidate 属性；

<form name="formRankMax" novalidate>