web-dev-qa-db-fra.com

la validation angularjs ng-minlength ne fonctionne pas, le formulaire est toujours soumis

J'essaie de soumettre le formulaire uniquement lors d'une validation réussie. validation fonctionne pour requis mais ne fonctionne pas pour ng-minlength

la saisie du formulaire est invalide mais le formulaire est toujours soumis. 

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

qu'est-ce que je fais mal. 

Je ne veux pas utiliser la méthode de désactivation du bouton d'envoi. 

angularjsangularjs-validation
22
Developer

C’est ce que vous faites mal: vous mélangez deux concepts, Validateurs angulaires et Validateurs HTML5 . 

Les validateurs required HTML5, par exemple, indiquent que: 

Lorsqu'il est présent, il spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.

Ainsi, si vous essayez de soumettre un formulaire comportant une entrée avec cet attribut, un message l'expliquant à l'utilisateur sera affiché, ce qui empêchera l'envoi du formulaire. C'est le comportement que vous voulez. Pourquoi ne pas travailler pour ng-minlength? Parce que ng-minlength est un validateur angulaire (vous pouvez le savoir car il commence par ng-), et il n’ajoute aucun comportement particulier au formulaire. Il suffit de définir l'entrée où elle se trouve sur invalide (et donc le formulaire), et vous permet de décider quoi faire avec.

Vous avez une option: vous pouvez utiliser le validateur pattern HTML5 pour spécifier que le champ nécessite au moins 11 caractères. Il aimerait ceci:

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

Ainsi, lorsque vous soumettez un formulaire contenant cette entrée, il ne sera pas envoyé si l'utilisateur a saisi moins de 11 caractères.

Mais puisque nous le sommes et que vous utilisez déjà le validateur pattern, vous pouvez utiliser l'expression régulière dans son plein potentiel et définir quelque chose comme:

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

Ce qui n'admettra que des valeurs de 11 caractères, qui commencent par "07" et qui ne contiennent que des chiffres. J'ai modifié votre violon pour vous montrer comment cela fonctionnerait: http://jsfiddle.net/helara/w35SQ/

29
T.M.

J'ai utilisé par erreur ngMaxlength="12" ngMinlength="6" au lieu de ng-minlength="6" ng-maxlength="12", cela fonctionne bien maintenant.

4
Aqib Mumtaz

ng-minlength & mg-maxlength fonctionnent tous deux dans AngularJS . Je l’ai testé sous AngularJS version 1.3.
Assurez-vous d'utiliser novalidate avec <form> pour désactiver la validation native du navigateur.

3
chaitu301

Cela devrait fonctionner:

Pour entrer un numéro de portable

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

Pour longueur minimum

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

Pour une longueur maximale

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

Je suis confronté au même problème et je pense que vous pouvez uniquement désactiver le bouton ou ignorer vous-même la valeur entrée. Vous pouvez également vérifier la propriété $ valid dans votre contrôleur et ignorer la valeur ... Ce n'est pas très gentil, mais je n'ai trouvé aucun autre moyen. 

0
Rafa

Ce travail pour moi les gars

    <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>
0
Haroldo Ramirez