0

操作を実行する前に入力要素を検証する方法、追加のアイテムをクリックして HTML テーブルに追加されたアイテムをリストすると、4 つの 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ディレクティブを使用します (または、type="submit" ボタンの ngClick)。

あなたの場合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 に答える