驗證放在Angularjs引導模式

Question

我使用angularjs引導模式裏面一個形式，我想驗證表單提交之前，所以我用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>