ng-pattern 不显示 $error.pattern答案

【问题标题】：ng-pattern doesn't show $error.patternng-pattern 不显示 $error.pattern
【发布时间】：2015-11-06 20:39:56
【问题描述】：

我有脚本 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>

【问题讨论】：

应该匹配什么模式？你能举个例子吗？
即1.1.1。它显示正常。但是如果我输入 1.1 错误不会出现

标签： javascript angularjs forms validation angularjs-forms

【解决方案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

【讨论】：

非常好的和简单的答案，谢谢@Pankaj，我错过了在模式属性上调用它。不知道你能做到这一点。
@alphapilgrim 很高兴听到它对您有所帮助。谢谢和欢呼;）
@ShubhamTiwari 你可以使用[attr.pattern]="/^(?:[0-9]{1,3}\.){3}/"