Question

我使用angularjs bootstrap模式，我想在提交前验证表单，所以我在required标签中使用input，如下所示：

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Add</h3>
    </div>
    <div class="modal-body">
        <form id="productForm" novalidate>
            <div>
                <label for="ProductName"> ProductName:</label>
                <input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />

            </div>
            <div style="margin:10px">
                <label for="Price">Price:</label>
                <input type="text" name="Price" id="Price" ng-model="model.Price" required />
            </div>
        </form>

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
     </div>
   </script>
  <button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>

但它不起作用，问题是什么？

Answer 1

尝试在表单中添加name。 productForm.$invalid指的是表单的名称。在docs的底部有一些例子。

编辑：我也会将按钮移动到表格

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Add</h3>
    </div>
    <form name="productForm" novalidate>
     <div class="modal-body">
         <form id="productForm" name="productForm" novalidate>
             <div>
                <label for="ProductName"> ProductName:</label>
                <input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />

             </div>
             <div style="margin:10px">
                <label for="Price">Price:</label>
                <input type="text" name="Price" id="Price" ng-model="model.Price" required />
             </div>

      </div>
      <div class="modal-footer">
         <button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
         <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>

     </form>
   </script>
  <button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>

验证放置在Angularjs Bootstrap模式中的表单

1 个答案: