15

我在这里有脚本并且 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>
4

1 回答 1

26

当您添加带有名称的表单标签时，角度确实会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

于 2015-08-13T18:49:18.387 回答