0

I would like to do a validation on submit only. Right now, I've created a directive for an input that checks if minimum value is 5000 but I dont want it to check each number I type via keypress. I only want it to check when I hit submit. Here it is : http://jsfiddle.net/58b7491d/

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 Answer 1

1

IMO validating after submit is not a very good UX. I would try using ng-messages directive along with setting ng-model-options to update on blur.

Consider reading year of moo's post about this

He goes into some depth about validators, both synchronous and asynchronous, along with a little section on ng-model-options.

Angular docs - ngModelOptions

Angular docs - ngMessages

Sign up to request clarification or add additional context in comments.

1 Comment

I ended up using this method. Thanks Cory

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.