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

我使用angularjs引导模式，我想在提交前验证表单，所以我在

input

中使用

required

，如下所示：

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

添加
产品名称：
价格：
拯救
取消
添加产品

---

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

正在尝试向表单中添加

名称<代码>产品表单。$invalid

指表单的名称。下面是一些例子

编辑：我还会将按钮移动到表单中

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

添加
产品名称：
价格：
拯救
取消
添加产品

正在尝试将

名称添加到表单中<代码>产品表单。$invalid

指表单的名称。下面是一些例子

编辑：我还会将按钮移动到表单中

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

添加
产品名称：
价格：
拯救
取消
添加产品