CODEWITHSUNDEEP
javascriptjqueryangularjs
user1153540
user1153540

Reputation: 49

Validate all Textboxes on first Button click but not for second button click in Angular js

I am very new to Angular js. I have few text boxes and a two buttons (Search,ShowAll) in a html page. On click of Search button all text boxes should be validated and for clicking on ShowAll there should not be any validation.I want to validate all the models behind the textboxes at one go without specifying each of the model's name (like validations group in asp.net). Is this possible in angular js? I am doing a ajax post here.

<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>

Upvotes: 0

Views: 208

Answers (1)

Kailas
Kailas

Reputation: 7578

you can validate it in html itself, using angular validations and keep the submit button disabled till you get a valid input by using ng-disabled as:

    <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>

Upvotes: 1

Related Questions