2016-11-15 62 views
0

我有以下表單,但某些字段在頁面加載框下顯示成功消息,甚至沒有觸摸表單。 問題是什麼?angularjs表單驗證顯示頁面加載時顯示成功空表單

這裏是控制器:

app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert","$location", "firebase", "$translate","$http", "$rootScope", "flowFactory", 
    function ($scope, $state, $timeout, SweetAlert, $location, firebase, $translate, $http, $rootScope, flowFactory) { 

     $scope.master = $scope.myModel; 
     $scope.form = { 

      submit: function (form) { 
       var firstError = null; 
       if (form.$invalid) { 
        var field = null, firstError = null; 
        for (field in form) { 
         if (field[0] != '$') { 
          if (firstError === null && !form[field].$valid) { 
           firstError = form[field].$name; 
          } 
          if (form[field].$pristine) { 
           form[field].$dirty = true; 
          } 
         } 
        } 
        angular.element('.ng-invalid[name=' + firstError + ']').focus(); 
        SweetAlert.swal("The form cannot be submitted because it contains validation errors!", "Errors are marked with a red, dashed border!", "error"); 
        return; 

       } else { 
        SweetAlert.swal("Good job!", "Your form is ready to be submitted!", "success"); 
        //your code for submit 
       } 

      }, 
      reset: function (form) { 

       $scope.myModel = angular.copy($scope.master); 
       form.$setPristine(true); 

      } 
     }; 

}]); 

這裏是顯示空的形式在頁面加載成功的文本字段:

<div class="form-group" ng-class="{'has-error':Form.keyword.$dirty && Form.keyword.$invalid, 'has-success':Form.keyword.$valid}" > 
    <label class="control-label" translate="list.keyword"> 
     Keyword<span class="symbol required"></span> 
    </label> 
    <ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword" title="Choose a keyword"> 
     <ui-select-match placeholder="Enter the keywords...">{{$item}}</ui-select-match> 
     <ui-select-choices repeat="r in list.keylist | filter:$select.search"> 
      {{r}} 
     </ui-select-choices> 
    </ui-select> 
    <span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.required">Keyword is required.</span> 
    <span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.minlength">Too short!</span> 
    <span class="success text-small" ng-if="Form.keyword.$valid">Correct!</span> 
</div> 
+0

與NG-秀,而不是NG-如果嘗試。 – garethb

回答

1

嘗試使用需要和您的用戶界面 - 屬性MINLENGTH選擇。像下面的東西。

<ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword" title="Choose a keyword" required minlength="6"> 

有一個已知的bug這裏https://github.com/angular-ui/ui-select/issues/258