angularjs ng-minlength 验证不起作用，表单仍在提交中答案

【问题标题】：angularjs ng-minlength validation is not working, form still being submittedangularjs ng-minlength 验证不起作用，表单仍在提交中
【发布时间】：2013-09-02 04:26:53
【问题描述】：

我正在尝试仅在成功验证后提交表单。验证适用于 required 但不适用于 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/

我做错了什么。

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

【问题讨论】：

你可能想检查this
谢谢@maxdec，我很好奇为什么 angularjs 没有做它应该做的事情。

标签： angularjs angularjs-validation

【解决方案1】：

这就是你做错了：你混合了两个概念，Angular validators 和 HTML5 validators。

例如，必需 HTML5 验证器声明：

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

因此，如果您尝试提交具有此属性的输入的表单，它将向用户显示一条解释这一点的消息，并且会阻止发送该表单。这是你想要的行为。为什么不适合 ng-minlength？因为 ng-minlength 是一个 Angular 验证器（你可以看出来，因为它以 ng- 开头），并且它不会向表单添加任何特殊行为。它只是将其所在的输入设置为无效（因此，表单），并让您决定如何处理它。

您有一个选择：您可以使用 pattern HTML5 验证器，指定字段至少需要 11 个字符。它会是这样的：

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

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

但既然我们是它，并且您已经在使用 pattern 验证器，您可以充分利用正则表达式，并定义如下内容：

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

它只接受 11 个字符的值，以“07”开头并且只包含数字。我已经修改了你的小提琴，向你展示它是如何工作的：http://jsfiddle.net/helara/w35SQ/

【讨论】：

就我而言，它不起作用，因为我使用的是textarea 而不是input
有用的答案。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

ng-minlength 和 mg-maxlength 都在 AngularJS 中工作。我已经在 AngularJS 1.3 版中对此进行了测试。
确保使用 novalidate 和 <form> 来禁用浏览器的本机验证。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
@jgritty 我相信这确实提供了答案。

【解决方案4】：

这应该可行：

输入手机号码

ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"

最小长度

ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"

最大长度

ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"

【讨论】：

【解决方案5】：

这对我有用

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
        <label class="mdl-textfield__label" for="cpf">CPF *</label>
    </div>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>

【讨论】：

【解决方案6】：

我面临同样的问题，我认为您只能禁用按钮或自己忽略输入的值。您还可以检查控制器中的 $valid 属性并忽略该值......这不是很好，但我没有找到其他方法。

【讨论】：