NG模式不與正則表達式的工作

Question

我的形式有以下在線驗證

<form name="coForm" novalidate> 
<div> 
    <label>Transaction: </label> 
    <input type="text" name="transaction" class="form-control" 
      placeholder="<Direction> <Message Type>, ex.:OUT X12214" 
      ng-model="newco.transaction" 
      ng-pattern=/(^(IN)([A-Za-z0-9 &_]+))|(^(OUT)([A-Za-z0-9 &_]+))/ 
    required> 

     <span style="color:red" 
     ng-show="coForm.transaction.$dirty || 
        coForm.transaction.$invalid"> 
     <span ng-show="coForm.transaction.$error.pattern"> 
      Enter correct value for Transaction 
     </span> 
     <span ng-show="coForm.transaction.$error.required"> 
      Transaction is required. 
     </span> 
</div> 
</form> 

但驗證僅適用於required而不是pattern

Here is the fiddle

下面是幾個例子正匹配：

OUT X12214 
In X12850 
IN ARRANT 
OUT CORREC&TRANSLEG 
OUT TEST_TEST 
IN TEST2&TEST2 

Answer 1

你失蹤的ng-pattern屬性&的雙引號，你也沒有初始化頁面上的角度，你需要添加ng-app到網頁上運行的角度

標記

<form name="coForm" novalidate ng-app=""> 
    <div> 
     <label>Transaction:</label> 
     <input type="text" name="transaction" class="form-control" placeholder="<Direction> <Message Type>, ex.:OUT X12214" ng-model="newco.transaction" 
     ng-pattern="/(^(IN)([A-Za-z0-9 &_]+))|(^(OUT)([A-Za-z0-9 &_]+))/" required> 
     <span style="color:red" ng-show="coForm.transaction.$dirty || coForm.transaction.$invalid"> 
      <span ng-show="coForm.transaction.$error.pattern">Enter correct value for Transaction</span> 
      <span ng-show="coForm.transaction.$error.required">Transaction is required.</span> 
     </span> 
    </div> 
</form> 

JsFiddle

Answer 2

使用&&而不是||

ng-show="coForm.transaction.$dirty && 
       coForm.transaction.$invalid">