验证所有文本框的第一个按钮点击但不是第二个按钮点击角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>