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

Issue

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

Solution

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

Answered By – MUHAMMAD MUBUSHER ASLAM

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.