ng 模式不显示 $error.pattern

Question

我有脚本 here 并且 ng-pattern 工作正常，因为 scope.subnet 仅在输入匹配模式后才显示在输出中。但是如果 ng-pattern 不匹配，ng-show 不会显示任何错误

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

Answer 1

当您添加带有名称的表单标签时，angular 会为该 name 属性值创建一个 scope 变量，并添加表单的所有表单字段 name属性。这些字段属性变量在表单范围对象中创建。像这里一样，您使用的是 myForm，这意味着 $scope.myFrom 具有有关表单字段的所有信息。喜欢使用 $valid、$invalid、$error 等

的有效性

此处您在表单的 subnet 元素上使用 ng-show="myForm.subnet.$error.pattern"。您错过了在输入字段上添加 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}/" >

Working Plunkr

ng 模式不显示 $error.pattern

ng-pattern doesn't show $error.pattern

javascript

forms

validation

angularjs

angularjs-forms