angularjs ng-minlength验证无效,表单仍在提交中

Question

我试图仅在成功验证时提交表单.验证适用于所需但不适用于ng-minlength

表单输入无效但表单仍在提交.

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
 <div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
        <label class="control-label" for="mobile">Mobile</label>
        <div class="controls">
            <input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11"  required />
            <span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
            <span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>           
        </div>
    </div>

     <div class="control-group">
        <div class="controls">                       
            <input  class="btn" type="submit" value ="submit" />
        </div>

         count: {{count}}<br />

<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
    </div>
</form>

http://jsfiddle.net/pMMke/9/

我究竟做错了什么.

我不想使用提交按钮禁用方法.

Answer 1

这就是你做错了:你混合了两个概念,Angular验证器 和 HTML5验证器.

在需要 HTML5验证,例如,指出:

如果存在,它指定在提交表单之前必须填写输入字段.

因此,如果您尝试提交具有此属性的输入的表单,它将向用户显示向其解释此消息的消息,并且它将阻止发送表单.这是你想要的行为.为什么不适用于ng-minlength？因为ng-minlength是Angular验证器(你可以告诉因为它以ng-开头),并且它不会向表单添加任何特殊行为.它只是将输入位置设置为无效(因此,表单),并让您决定如何处理它.

您有一个选项:您可以使用模式 HTML5验证器,指定该字段至少需要11个字符.它想这样:

<input type="text" pattern=".{11,}">

因此,当您提交包含此输入的表单时,如果用户输入的字符少于11个,则不会发送该表单.

但既然我们是它,并且你已经在使用模式验证器,那么你可以充分利用正则表达式,并定义如下:

<input type="text" pattern="07[0-9]{9}" />

这将只允许11个字符的值,以"07"开头并且仅包含数字.我修改了你的小提琴,告诉你它是如何工作的:http://jsfiddle.net/helara/w35SQ/

Answer 2

我错误地使用ngMaxlength="12" ngMinlength="6"而不是ng-minlength="6" ng-maxlength="12"，它现在工作正常。