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模型中的最小值相同。
但是当我输入“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>

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

1 个答案: