如何禁用提交按鈕，直到所有的字段都填入表單中？

Question

我有一組表單和一組字段。我的問題是，提交按鈕最初被禁用，但任何一個字段有效或非空按鈕啓用。這裏是我的源代碼：

<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate> 

    <fieldset class="group"> 

     <div class="field-group"> 
      <label class="label">Product Name</label> 
      <input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/> 
      <p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p> 
      <div class="error"></div> 
      <span class="result_product" style="color: #880000"></span> 
     </div> 

     <div class="field-group"> 
      <input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/> 
      <p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p> 
      <label class="label">Who are end users</label> 
      <div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div> 
     </div> 


     <div class="field-group"> 
      <label for="licenseKey">What Problem Are They Facing Today</label> 
      <textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea> 
      <p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p> 
      <div class="description">Spend So much in .....</div> 
     </div> 


     <div class="field-group"> 

      <label class="label">What kind of product is this</label> 
      <input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/> 
      <p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p> 
      <div class="description">[Software, MobileApp, JIRA-Plugin]</div> 
     </div> 


     <div class="field-group"> 
      <label for="d-lname">How do you plan to solve the problem</label> 
      <input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required /> 
      <p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p> 
      <div class="error"></div> 
      <div class="description">[Load Balancing of Personal, Automated Traffic Info]</div> 
     </div> 


     <div class="field-group"> 
      <label for="d-lname">Who are your competitors</label> 
      <input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/> 
      <p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p> 
      <div class="error"></div> 
      <div class="description">Traditional Commuting Solution</div> 
     </div> 

     <div class="field-group"> 
      <label for="d-lname">How do you differntiate from your competitors</label> 
      <input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/> 
      <p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p> 
      <div class="error"></div> 
      <div class="description">[Automated, Secure]</div> 
     </div> 

    </fieldset> 

     <div class="buttons-container"> 
      <div class="buttons"> 

       <button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit" 
         id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button> 
       <button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button> 
      </div> 
     </div> 
</form> 

如何確保提交按鈕被禁用，直到所有的字段被填充。 我嘗試了幾乎所有可用的解決方案，比如製作所有需要的字段，將提交按鈕設置爲./。但似乎沒有任何工作。

Answer 1

你幾乎做得對。要使用角度的表單驗證，您必須使用角度指令。例如，使用ng-required，而不是正常required（雖然它會工作，但你應該使用ng-required的最佳實踐）：

<form name="newDiscoveryForm"> 
    <input type="text" name="someName" 
      ng-model="someModel" 
      ng-required="true" /> <!-- use ng-required --> 
    <!-- other inputs --> 

    <!-- $invalid will evaluate to true if the `ng-required` are not valid --> 
    <button type="submit" 
      ng-disabled="newDiscoveryForm.$invalid"> 
     Submit! 
    </button> 
</form> 

見this JSFIDDLE