0

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

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

点击这里查看代码

4

2 回答 2

0

您需要使用表单验证。为此，将您的表格包装到表单标签中并使用ngSubmit指令（或 ngClick 上的 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

于 2015-09-13T14:12:54.473 回答
0

我找到了答案，我在 texboxes 为空时禁用按钮

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

单击此处查看 plunker 代码

于 2015-09-14T10:47:02.343 回答