Menu
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>
299
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
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
