正規表現は期待通りに動作しません

Question

正規表現を使用して、anglejを持つフォーム入力を検証します。私はng-patternを使っています。

<input type="text" ng-pattern="/^([A-z]){3}$/"> 
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button> 

私はそれが（予想通り）、有効なでない表現にマッチするものないを入力した場合。パターンにマッチするものを入力すると、（期待どおり）有効になります。

しかし、期待どおりに動作しません。何も入力しなかった場合（空文字入力）、フォームは有効です。それは避けたいものです：有効ではありません。

Answer 1

あなたは入力にそれを認識するための角度フォーム検証のためのng-model属性を与える必要があります。より多くの制御のために、入力にname属性を与えることもできます。 Angular Input documentationを参照してください。

この例ではng-modelとnameは、フォーム検証のために使用することができるかを証明しなければなりません。私はあなたの正規表現を調整し、入力をrequiredとしました。

var myApp = angular.module('myApp', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    
 
    <form name="demoForm"> 
 
    
 
    <input type="text" 
 
      ng-model="myValue" 
 
      name="myInput" 
 
      ng-pattern="/^[A-Za-z]{3}$/" 
 
      required /> 
 
    
 
    <button type="submit" ng-disabled="demoForm.$invalid">Ok</button> 
 
    
 
    <div>Input valid? {{demoForm.myInput.$valid}}</div> 
 
    <div>Form valid? {{demoForm.$valid}}</div> 
 
    <div>Model value: {{myValue}}</div> 
 
    </form> 
 
    
 
</div>