angularjs窗體驗證顯示頁面加載成功

我在我的控制器中有一個函數來驗證是否可用複選框和一個自由文本區域中最多三個選項。用戶可以選擇三個複選框並將文本區域留空，或者可以選擇兩個複選框並在文本區域中鍵入一些文本。允許三種組合。此字段爲required，用戶必須選擇三種組合。函數本身正在工作，但驗證顯示成功！問題是當頁面加載時，所有選項都變綠並顯示成功消息，而用戶甚至沒有點擊任何部分。angularjs窗體驗證顯示頁面加載成功

下面是HTML代碼：

<form name="Form"> 
    <div class="form-group" > 
     <div class="form-group" ng-class="{'has-error':Form.cooptype.$dirty && Form.cooptype.$invalid, 'has-success':Form.cooptype.$valid}"> 
     <label class="control-label" translate="list.cooporationtype"> 
      Type(s) of project<span class="symbol required"></span> 
     </label> 
     :<br/> 
     <div ng-repeat="topic in list.cooperationtypelist"> 
      <div > {{topic.item}}</div> 
      <ul > 
       <li ng-repeat="subitem in topic.subitems"> 
        <input type="checkbox" name="cooptype" 
          ng-disabled="checkboxDisable(subitem.key)" 
          ng-model="myModel.cooperationtype[subitem.key]"> 
          {{subitem.values | translate}} 

       </li> 

      </ul> 
      <span class="error text-small block" ng-if="Form.cooptype.$dirty && Form.cooptype.$error.required">Field is required.</span> 
      <span class="success text-small" ng-if="Form.cooptype.$valid">Done!</span> 
     </div> 
     </div> 
     <div class="form-group" ng-class="{'has-error':Form.cooptypetext.$dirty && Form.cooptypetext.$invalid, 'has-success':Form.cooptypetext.$valid}"> 
      <p>or type it in yourself:</p> 

      <textarea type="text" class="form-control" name="cooptypetext" placeholder="Enter the cooperation type (max of 100 characters)" 
         ng-model="myModel.cooperationtype.coopfreetext" 
         ng-disabled="checkboxDisable('cooptypetext')" 
         ng-minlength=5 
         ng-maxlength=100></textarea> 
      <span class="error text-small block" ng-if="Form.cooptypetext.$error.maxlength">Too long!</span> 
      <span class="error text-small block" ng-if="Form.cooptypetext.$error.minlength">Too short!</span> 
      <span class="success text-small" ng-if="Form.cooptypetext.$valid">Done!</span> 
     </div> 
    </div> 
</form>

這裏是我的控制器功能：

$scope.myModel.cooperationtype = {}; 
$scope.checkboxDisable = function(key) { 
    if(!$scope.myModel.cooperationtype[key]) { 
     var count = 0; 
     Object.keys($scope.myModel.cooperationtype).forEach(function(key) { 
      if($scope.myModel.cooperationtype[key]) { 
       ++count; 
      } 
     }); 

     if(count >= 3) { 
      return true; 
     } 
    } 

    return false; 
};

來源

2016-11-15 cplus

你要檢查，以確保該領域髒，又名用戶鍵入一些輸入到他們，除了是有效的。你也需要使用ng-form，而不是divs

來源

2016-11-15 22:02:12 holtc

正如我所說，在頁面加載時，甚至沒有用戶沒有看到字段呢！田野變綠並在田野下顯示成功。 – cplus

是的，因爲除非您檢查表單是否髒，否則驗證的正確性將被觸發。您還需要使用表單元素 – holtc

，那麼我該如何糾正這個錯誤？ – cplus

angularjs窗體驗證顯示頁面加載成功

回答

相關問題