如何在按下按钮以在 html table 中添加项目之前验证 angularJS 中的输入

Question

如何在执行任何操作之前验证输入元素，我有四个 html 输入元素和 html table 当您单击添加上的项目以列出它时添加的项目 HTML table 现在我的问题是验证，我想在单击按钮时验证输入元素。

<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

您需要使用表单验证。为此，将 table 包装到表单标签中并使用 ngSubmit 指令（或 ngClick on the type="submit" 按钮）。

在您的情况下，您希望将 required 约束添加到表单字段。然后在表单有效之前禁用提交按钮是有意义的 ng-disabled="bookForm.$invalid".

总计：

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

演示： http://plnkr.co/edit/JIozQNai88dHipaIfeLH?p=preview

Answer 2

我找到了当文本框为空时禁用按钮的答案

<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

如何在按下按钮以在 html table 中添加项目之前验证 angularJS 中的输入

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

html

validation

angularjs

angularjs-validation