javascript - ng-required 不适用于具有最小条件的数字输入

Question

我有一个复选框，根据它的值ng-model，我正在使用 div 切换 div 的可见性ng-show。

这个 div 包含一个<input>of type="number"。我对它进行了验证min="10000"。

如果输入的数字小于 10000，我不希望提交表单。但是，我希望这仅在选中复选框时发生。所以，我ng-required用来检查复选框的值。

<input type="checkbox" ng-model="isOn"/>

<div ng-show="isOn">
    <input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>

如果有人在没有触摸复选框和输入字段的情况下继续操作，则表单将被提交。但是，如果我单击复选框，输入一个 <10000 的数字，然后再次取消选中，则不会提交表单。

在控制台上我得到错误，它不能专注于输入控件。ng-required无法在这种情况下工作min。无论ng-required.

有什么办法可以让这个工作吗？

PS：我不想在按键上使用文本输入+长度限制+受限字符代码的解决方案，以便只能输入数字。

Answer 1

当用户取消选中该复选框时，您还需要将数字输入字段的模型重置为其初始状态。

Answer 2

我用ng-if而不是ng-show它工作。

在发布问题之前我已经尝试过，但它没有用。后来我意识到我已经对不同的 html 文件进行了更改。

Answer 3

我希望这应该工作

<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
 <div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
 <span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>                                                        
 </div>                 
<div ng-show="MyForm.isOn">
<input type="text"  ng-model="MyForm.counter" required min="1000" />
 <div ng-show="MyForm.counter.$touched||MyForm.$submitted">
 <span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>                       
  <span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>                        
  </div>
 </div>
 </form>