web-dev-qa-db-fra.com

ng-pattern n'affiche pas $ error.pattern

J'ai le script ici et ng-pattern fonctionne correctement parce que scope.subnet est affiché dans la sortie uniquement après que l'entrée correspond au modèle. Mais ng-show n'affiche aucune erreur si ng-pattern ne correspond pas

<body ng-contoller="myConfigGenCtr">
  <form novalidate name="myForm">
            <div class="form-group">
                <label for="hostname">Firewall hostname</label>
                <input type="text" ng-model="hostname" class="form-control" id="hostname">
            </div>
            <div class="form-group">
                <label for="subnet">Firewall subnet</label>
                <input type="text" ng-model="subnet" class="form-control" id="subnet"
                       required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" >
                <div class="custom-error"  ng-show="myForm.subnet.$error.pattern">
                    Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
            </div>
        </form>
  <div>Output: {{subnet}}</div>      
</body>
javascriptangularjsformsvalidationangularjs-forms
15
irom

Lorsque vous ajoutez une balise de formulaire avec son nom, angular crée une variable scope pour cette valeur d'attribut name et ajoute tous les champs de formulaire du formulaire qui ont des attributs name. Ces variables d'attribut de champs sont créées à l'intérieur de l'objet de portée du formulaire. Comme ici, vous utilisez myForm cela signifie $scope.myFrom contient toutes les informations sur les champs du formulaire. comme sa validité en utilisant $valid, $invalid, $error, etc.

Ici, vous utilisez ng-show="myForm.subnet.$error.pattern" on subnet élément de formulaire. Vous avez manqué d'ajouter name="subnet" attribut sur le champ de saisie, qui se révèle être subnet la validation de l'élément n'est pas disponible dans la variable de portée myForm.

Annotation 

<input type="text" name="subnet" ng-model="subnet" class="form-control" 
id="subnet" required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" >

Plunkr de travail

25
Pankaj Parkar