すべてのフィールドがフォームに入力されるまで、送信ボタンを無効にするにはどうすればよいですか？

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

あなたはほとんどそれを正しくやっています。 angleのフォーム検証を使用するには、そのためにangleディレクティブを使用する必要があります。 （それは動作しますが、しかし、あなたはベストプラクティスのための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