angularjs ng-min - length验证无效，表单仍在提交中

I am trying to submit the form on only successful validation. validation is working for required but not working for ng-minlength

我试图提交的表格只有成功的验证。验证工作是为需要而不是为ng-minlength工作的。

form input is invalid but form is still being submitted.

表单输入无效，但仍在提交表单。

<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/

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

what am I doing wrong.

我做错了什么?

I don't want to use submit button disable method.

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

6 个解决方案

#1

This is what you are doing wrong: you are mixing two concepts, Angular validators and HTML5 validators.

这正是您所做的错误之处:您混合了两个概念:角度验证器和HTML5验证器。

The required HTML5 validators, for instance, states that:

例如，所需的HTML5验证器声明:

When present, it specifies that an input field must be filled out before submitting the form.

当出现时，它指定在提交表单之前必须填写输入字段。

So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.

因此，如果您试图提交具有此属性的输入的表单，它将显示一条消息向用户解释这一点，并且它将阻止表单被发送。这就是你想要的行为。为什么不为超长睡眠而工作?因为ng-minlength是一个角度验证器(您可以用ng-)来判断它，并且它不会向表单添加任何特殊的行为。它只需将输入设置为无效(因此是表单)，然后让您决定如何使用它。

You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:

您有一个选项:您可以使用模式HTML5 validator，指定字段至少需要11个字符。这将是这样的:

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

So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.

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

But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:

但是由于我们是这样的，并且您已经使用了模式验证器，您可以使用正则表达式的全部潜能，并定义如下:

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

Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/

它只允许包含11个字符的值，以“07”开头，并且只包含数字。我修改了您的fiddle，向您展示它是如何工作的:http://jsfiddle.net/helara/w35SQ/

#2

I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.

我错误地使用了ngMaxlength="12" ngMinlength="6"而不是ng-minlength="6" ng-maxlength="12"，现在运行良好。

#3

Both ng-minlength & mg-maxlength works in AngularJS. I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.

ng-minlength和mg-maxlength都在AngularJS中工作。我在AngularJS版本1.3中测试过这个。确保使用novalidate和

来禁用浏览器的本机验证。

#4

This should work:

这应该工作:

To enter mobile number

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

For minimum length

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

For maximum length

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

#5

I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.

我面临着同样的问题，我认为您只能禁用按钮或忽略输入的值。您还可以检查控制器中的$valid属性，并忽略该值……不是很好，但是我没有别的办法。

#6

This work for me guys

这对我来说是可行的

    <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>