2015-02-18 5 views
0

Я хотел бы сделать валидацию только для отправки. Прямо сейчас, я создал директиву для ввода, который проверяет, является ли минимальное значение 5000, но я не хочу, чтобы он проверял каждый номер, который я вводил с помощью нажатия клавиши. Я только хочу, чтобы он проверял, когда я попал в submit. Вот оно: http://jsfiddle.net/58b7491d/ANGULARJS -validate on submit only

HTML

<div ng-app="myAppApp"> 
    <div ng-controller="MainCtrl"> 
     <form name="myForm" novalidate ng-submit="submitPlanInfo(myForm.$valid);"> 
      <div> 
       <label for="initInvestment">Number (Min: 5000)</label> 
       <input id="initInvestment" name="initInvestment" class="form-control" ng-model="model1.InitInvestment" required min-Value="5000"/> 
       <p ng-show="myForm.initInvestment.$invalid && myForm.initInvestment.$dirty && myForm.$submitted" class="validation">Min Value should be 5000</p> 

      </div> 
      <div> 
       <button type="submit" name="submit">Submit</button> 
      </div> 
     </form> 
    </div> 
</div> 

JAVASCRIPT

angular.module('myAppApp', []) 
.directive('minValue', function() { 
    return { 
     require: "ngModel", 
     restrict: 'A', 
     link: function postLink(scope, element, attrs, ngModel) { 

      ngModel.$validators.minValueErrMsg = function (value) { 
       var status = true; 
       console.log(value); 
       if (value < attrs.minValue) { 
        status = false; 
       } 
       return status; 
      }; 
     } 
    }; 
}) 
.controller('MainCtrl', function ($scope, $controller) { 
    //LETS DO THE FORM VALIDATION AFTER HITTING SUBMIT!! 
    $scope.submitPlanInfo = function (isValid) { 
     console.log($scope.myForm); 
     if ($scope.myForm.$valid) { 
      console.log($scope.myForm.initInvestment); 
      // console.log(angular.isNumber(parseInt($scope.myForm.initInvestment.$modelValue))); 
      var minVal = parseInt($scope.myForm.initInvestment.$modelValue); 
      // console.log(angular.isNumber(minVal)); 
      if (minVal < 5000){ 
       console.log("should be min 5000"); 
       return false; 
      }else{ 
       console.log("success"); 
       return true; 
      } 
      alert("Valid"); 
     } 

    }; 
    //END OF FORM VALIDATION 
}); 

ответ

1

IMO проверки после того, как представить это не очень хороший UX. Я бы попытался использовать директиву ng-messages вместе с настройкой ng-model-options для обновления на blur.

Consider reading year of moo's post about this

Он переходит в некоторую глубину около валидаторы, как синхронной и асинхронной, наряду с небольшим количеством раздела на ng-model-options.

Angular docs - ngModelOptions

Angular docs - ngMessages

+0

Я закончил с использованием этого метода. Благодаря Cory – gerl