ng-pattern doesn't show $error.pattern

Question

I have script here and ng-pattern works correctly because scope.subnet is shown in Output only after input matches pattern. But ng-show doesn't display any error if ng-pattern is not matched

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

i.e. 1.1.1. it displays fine. But if i type 1.1 error doesnt show up — irom, Aug 13 '15 at 18:28

Pankaj Parkar · Accepted Answer · 2016-03-29T19:09:43.977

26

When you add form tag with its name, angular does create a scope variable for that name attribute value & do add all the form fields of the form which have name attributes. Those fields attribute variable get created inside form scope object. Like here you are using myForm that means $scope.myFrom has all the information about the form fields. like its validity using $valid, $invalid, $error, etc.

Here you are using ng-show="myForm.subnet.$error.pattern" on subnet element of form. You missed to add name="subnet" attribute on input field, that turns out to subnet element validation doesn't available inside myForm scope variable.

Markup

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

Working Plunkr

edited Mar 29 '16 at 19:09

answered Aug 13 '15 at 18:49

Pankaj Parkar

134,766
23
234
299

Very nice and simple answer, thanks @Pankaj, I was missing calling it on the pattern attr. Didn't know you could do this. – alphapilgrim Mar 29 '16 at 19:03
@alphapilgrim glad to hear that it helped you. Thanks & cheers ;) – Pankaj Parkar Mar 29 '16 at 19:11
@ShubhamTiwari you could use `[attr.pattern]="/^(?:[0-9]{1,3}\.){3}/"` – Pankaj Parkar Sep 04 '17 at 13:47

ng-pattern doesn't show $error.pattern

1 Answers1