проверка правильности формы угловой формы, показывающая успех на загрузке страницы

Question

У меня есть функция в моем контроллере, чтобы проверить, выполнены ли максимум из трех вариантов из доступных флажков и одной свободной текстовой области. Пользователь может выбрать три флажка и оставить текстовую область пустым или выбрать два флажка и ввести текст в текстовой области. Допускается комбинация из трех. Это поле required, пользователь должен выбрать комбинацию из трех. Функция сама работает, но проверка показывает успех! Проблема заключается в том, когда страница загружена, все параметры загораются зеленым цветом и отображается сообщение об успешном завершении, тогда как пользователь даже не щелкнул по какой-либо ее части.

Вот 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; 
}; 

Answer 1

Вы хотите проверить, чтобы убедиться, что поля загрязнены, иначе пользователь набрал некоторый ввод в них, в дополнение к действию. Вам также нужно использовать ng-form, а не divs