Ng-pattern не показывает $error.pattern

У меня script здесь и ng-pattern работает правильно, потому что scope.subnet отображается в Output только после ввода шаблона ввода. Но ng-show не отображает никаких ошибок, если ng-pattern не сопоставляется

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

Ответ 1

Когда вы добавляете тег формы с его именем, angular создает переменную scope для этого значения атрибута name и добавляет все поля формы в форме, имеющей атрибуты name. Эти атрибуты атрибутов полей создаются внутри объекта области формы. Как и здесь, вы используете myForm, что означает, что $scope.myFrom имеет всю информацию о полях формы. как и его действительность с использованием $valid, $invalid, $error и т.д.

Здесь вы используете ng-show="myForm.subnet.$error.pattern" в элементе subnet формы. Вы пропустили добавить атрибут name="subnet" в поле ввода, который оказывается subnet проверка элемента не доступна внутри переменной области myForm.

Разметка

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

Рабочий Plunkr