Angularjs ng-minlength валидация не работает, форма все еще представляется

Я пытаюсь отправить форму только при успешной проверке. проверка работоспособности требуется, но не работает для 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/

что я делаю неправильно.

Я не хочу использовать метод отключения кнопки отправки.

Ответы

Ответ 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/

Ответ 2

Я ошибочно использовал ngMaxlength="12" ngMinlength="6" вместо ng-minlength="6" ng-maxlength="12", теперь он отлично работает.

Ответ 3

Оба ng-minlength и mg-maxlength работают в AngularJS. Я тестировал это в версии AngularJS 1.3.
Обязательно используйте novalidate с помощью <form>, чтобы отключить собственную проверку браузера.

Ответ 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

У меня такая же проблема, и я думаю, что вы можете только отключить кнопку или проигнорировать введенное значение самостоятельно. Вы также можете проверить свойство $valid в своем контроллере и игнорировать значение... Это не так приятно, но я не нашел другого пути.

Ответ 6

Эта работа для меня ребята

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