web-dev-qa-db-ja.com

ng-patternは$ error.patternを表示しません

Scope-subnetは入力がパターンに一致した後にのみ出力に表示されるため、スクリプト here とng-patternは正常に動作します。ただし、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>
javascriptangularjsformsvalidationangularjs-forms
15
irom

フォームタグに名前を追加すると、angularはそのscope属性値のname変数を作成し、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

25
Pankaj Parkar