驗證所有文本框的第一個按鈕點擊但不是第二個按鈕點擊角js

Question

我對Angular js很新。我在html頁面中有幾個文本框和一個兩個按鈕（Search，ShowAll）。點擊搜索按鈕，所有的文本框應該驗證，並點擊ShowAll不應該有任何驗證。我想一次驗證文本框後面的所有模型，而不指定每個模型的名稱（像驗證組在asp .net）。這可能在角js？我在這裏做一個阿賈克斯帖子。

<div ng-controller="myCtrl"> 
 
<table> 
 
       <tr id="dvTransactionSearch"> 
 
        <td align="right"> 
 
         Message ID : 
 
        </td> 
 
        <td align="left"> 
 
         <input type="text" style="width: 170px;" id="txtmessageId" ng-model="MessageId" /> 
 
        </td> 
 
        <td align="right"> 
 
         Consumer ID : 
 
        </td> 
 
        <td align="left"> 
 
         <input type="text" style="width: 170px;" id="txconsumerId" ng-model="ConsumerId" /> 
 
        </td> 
 
</tr> 
 
<tr> 
 
        
 
        <td align="left"> 
 
         <input type="button" id="btnSearch" value="Search" ng-click="Search()" /> 
 
         <input type="button" value="Show All" id="btnShowAll" ng-click="ShowAll()" /> 
 
         
 
        </td>     
 
       </tr> 
 
</table> 
 
</div>

Answer 1

您可以在HTML本身進行驗證，採用了棱角分明的驗證，並保持提交按鈕被禁用，直到你用NG-殘疾人等得到有效的輸入：

<div ng-controller="myCtrl"> 
    <form name="messageForm" novalidate> 
    <table> 
     <tr id="dvTransactionSearch"> 
      <td align="right"> 
       Message ID : 
      </td> 
      <td align="left"> 
       <input type="text" style="width: 170px;" name="txtmessageId" id="txtmessageId" ng-model="MessageId" required/> 
       <div ng-messages="messageForm.txtmessageId.$error" ng-if="messageForm.$submitted || messageForm.txtmessageId.$touched"> 
         <div ng-message="required"> Enter Text message ID</div> 
       </div> 
      </td> 
      <td align="right"> 
       Consumer ID : 
      </td> 
      <td align="left"> 
      <input type="text" style="width: 170px;" name="txconsumerId" id="txconsumerId" ng-model="ConsumerId" /> 
       <div ng-messages="messageForm.txconsumerId.$error" ng-if="messageForm.$submitted || messageForm.txconsumerId.$touched"> 
         <div ng-message="required"> Enter Consumer ID</div> 
       </div> 
      </td> 
     </tr> 
     <tr>    
      <td align="left"> 
       <input type="button" id="btnSearch" ng-disabled="messageForm.$invalid" value="Search" ng-click="Search()" /> 
       <input type="button" value="Show All" ng-disabled="messageForm.$invalid" id="btnShowAll" ng-click="ShowAll()" /> 

      </td>     
     </tr> 
    </table> 
    </form> 
</div>