角度驗證渲染NG-有效形式時是無效

Question

我有一個婚禮RSVP形式

我試圖隱藏的DONE提交按鈕，只顯示它時，形式是有效的。

<form method="POST" action="http://l.bheng.com:8888/wedding" accept-charset="UTF-8" class="ng-pristine ng-pristine ng-valid ng-valid-required ng-valid-email" role="form" id="rsvp-form" name="rsvp-form"> 
    <input name="_token" type="hidden" value="JK8PC04aF7xGsbcQoTvzz2FV61od1DmGdraiZNwB"> 
    <div class="col-xs-12 form-group"> 
     <label for="">Are you attending ? </label> 
     <br> 
     <label for="going"> 
      <input type="radio" id="going" value="1" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="3"> Yes 
     </label> 
     <label for="going"> 
      <input type="radio" id="going" value="0" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="4"> No 
     </label> 
    </div> 
    <div class="col-xs-12 form-group"> 
     <label for="">Number of total guests ? </label> 
     <br> 
     <select id="guestNum"> 
      <option value="1">Just Me</option> 
      <option value="2">Me and My +1</option> 
     </select> 
    </div> 
    <div class="col-xs-12 form-group"> 
     <label for="">Name</label> 
     <input type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-required" id="name" placeholder="Name" ng-model="name" ng-required="required"> 
    </div> 
    <div class="col-xs-12 form-group"> 
     <label for="">Email</label> 
     <input type="email" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-email ng-valid-required" placeholder="Email Address" id="email" ng-required="required" ng-model="email"> 
    </div> 
    <div class="col-xs-12 form-group"> 
     <label for="">Message</label> 
     <textarea id="message" ng-model="message" rows="5" type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty" placeholder="Message to us "></textarea> 
     <grammarly-btn> 
      <div data-reactroot="" class="_e725ae-textarea_btn _e725ae-anonymous _e725ae-not_focused" style="visibility: hidden; z-index: 2;"> 
       <div class="_e725ae-transform_wrap"> 
        <div title="Protected by Grammarly" class="_e725ae-status">&nbsp;</div> 
       </div> 
      </div> 
     </grammarly-btn> 
    </div> 
    <div class="col-xs-12" ng-hide="rsvp-form.name.$invalid || rsvp-form.email.$invalid "> 
     <a id="rsvp-submit" ng-click="rsvp()" class="button" style="width: 100%;"> 

        Done 

        <img src="/img/svg/default.svg" alt="Loading" style="width: 30px; float: right; padding-top: 7px; " class="hidden loading"> 

       </a> 
    </div> 
</form> 

我的完成按鈕會一直顯示，不管是什麼。

我該如何阻止？

我的表單如何擁有這個類？

• ng-pristine
• ng-valid < ---這怎麼可能？我什至不輸入任何名稱/電子郵件
• ng-valid-required < ---這怎麼可能？我什至不輸入任何名稱/電子郵件
• ng-valid-email < ---這怎麼可能？我沒有名字/甚至輸入任何電子郵件

的jsfiddle = https://jsfiddle.net/bheng/Ln3tqzcu/

Answer 1

您不應該將您的表格命名爲rsvpForm（及其所有的事件）而不是rsvp-form？我不認爲rsvp-form是JavaScript中的有效名稱。這可能是它不起作用的一個原因。也許你應該關閉novalidate關於form標記的HTML驗證，並且使用簡單的required而不是ng-required="required"，導致IMO試圖找到$scope.required，這是undefined，並且指令無法正常工作。工作小提琴：https://jsfiddle.net/od62sshv/3/

Answer 2

爲NG-有效的使用是這樣的：

ng-valid="isValid()" 

把所有的可接該DOM並將返回一個布爾值。 例子：

$scope.isValid = function() { 
    return True; 
} 

如果喲想使 '完成' 按鈕消失，但是，你要NG隱藏，NG-顯示，最好，NG-IF。看看他們。 ng-valid只會使按鈕變灰。

編輯：
下面是ng-valid的一個更全面的例子，爲了清楚起見。

HTML：

<input type="text" name="email" class="somethingUnrelated" ng-model="email"> 
<input type="button" name="confirm" class="somethingElse" ng-valid="isValid()"> 

JS：

$scope.isValid = function() { 
    if ($scope.email) { 
    return $scope.email.length > 0; 
    } 
} 

這不會讓你的按鈕消失，只有灰色。 如果你想讓它消失，用ng-show替換ng-valid。