how to validate input in angularJS before the button press to add item in html table - angularjs

Question

How to validate the input elements before performing any operation, I have four html input element and html table when you click item on add to list it added item in HTML table now my problem is validation, I want to validate input elements on button click.
<div ng-controller="BookStore">
<br />
<h2>Add New Book</h2>
<div style="border: 1px solid blue;">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" /></td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" /></td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Button" value="Add to list" ng-click="addItem(item)" />
</td>
</tr>
</table>
</div>
<div style="padding-top: 15px;">
<table border="1" class="mytable">
<tr>
<td>ISBN</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Price</td>
<td>Action</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.ISBN}}</td>
<td>
<span ng-hide="editMode">{{item.Name}}</span>
<input type="text" ng-show="editMode" ng-model="item.Name" />
</td>
<td>
<span ng-hide="editMode">{{item.Price}}</span>
<input type="number" ng-show="editMode" ng-model="item.Price" /></td>
<td>
<span ng-hide="editMode">{{item.Quantity}}</span>
<input type="number" ng-show="editMode" ng-model="item.Quantity" /></td>
<td>{{(item.Quantity) * (item.Price)}}</td>
<td><span>
<button type="submit" ng-hide="editMode" ng-click="editMode = true; editItem(item)">Edit</button></span>
<span>
<button type="submit" ng-show="editMode" ng-click="editMode = false">Save</button></span>
<span>
<input type="button" value="Delete" ng-click="removeItem($index)" /></span></td>
</tr>
<tr ng-show="!(items).length">
<td style="text-align: center" colspan="7">No item exist</td>
</tr>
</table>
</div>
<br />
<div style="font-weight: bold">Grand Total: {{totalPrice()}}</div>
<br />
</div>
Click here to see code

Answer 1

You need to use validation of the form. For this wrap your table into form tag and use ngSubmit directive (or ngClick on the type="submit" button).
In your case you want required constraint added to form fields. Then it makes sense to disable submit button until form is valid ng-disabled="bookForm.$invalid".
All together:
<form novalidate ng-submit="addItem(item)" name="bookForm">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" required />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" required />
</td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" required />
</td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" required />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" ng-disabled="bookForm.$invalid" value="Add to list" />
</td>
</tr>
</table>
</form>
Demo: http://plnkr.co/edit/JIozQNai88dHipaIfeLH?p=preview

Answer 2

i have found the answer i make button disabled when the texboxes are empty
<div class="col-xs-12 col-sm-12">
<button class="btn btn-xs btn-primary" type="button" value="Add To List" ng-disabled="!item.Description || !item.FileName || !item.Path" ng-click="item.Description;addItem(item)">Add</button>
</div>
Click Here to see the plunker code