Trigger custom AngularJS form validation on model change

Question

I have a custom validation directive that I use to ensure two dates are within a valid range. The directive works fine when a user changes the values, however it does not trigger when I load in a new lineItem model via AJAX.

The problem is that a user could enter invalid dates on the form and trigger the error, then load another lineItem. At this point, there is an error message on the form even though the data in the form is valid.

If I try the same thing with Angular's built in validation (like required), the validation triggers and disappears appropriately. So, what do I need to do to make my validation trigger the same way as Angular's?

(note: I'm using novalidate on the form attribute, and Angular v1.1.5)

DIRECTIVE

ngApp.directive("validateBefore", function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function(value) {
                var before = scope.$eval(attrs.validateBefore);
                if(value <= before || !before) {
                    ctrl.$setValidity("validateBefore", true);
                    return value;
                } else {
                    ctrl.$setValidity("validateBefore", false);
                    return undefined;
                }
            });
        }
    }
});

TEMPLATE

<div class="date-group">
    <span class="date">
        <input type="text" class="input-medium" name="starts-at" ng-model="lineItem.startsAt" placeholder="From..." validate-before="lineItem.endsAt">  
    </span>

    <span class="date">
        <input type="text" class="input-medium" name="ends-at" ng-model="lineItem.endsAt" placeholder="To..." validate-after="lineItem.startsAt"> 
    </span>    
</div>

CONTROLLER

var lineItem = LineItem.get( { id: lineItemId }, function () {
    $scope.lineItem = lineItem;

    if($scope.lineItemForm) {
        $scope.lineItemForm.$setPristine();
    }
}

Mike Robinson · Accepted Answer · 2013-07-01 16:09:13Z

10

Ah-hah, I was only accounting for half of the equation. The $parsers fire when input is sent from the DOM to the model. I needed to add $formatters, which sends data from the model to the DOM.

After the $parsers, I added the following:

ctrl.$formatters.unshift(function(value) {
    var before = scope.$eval(attrs.validateBefore);
    ctrl.$setValidity("validateBefore", before ? value <= before : true);
    return value;
});

This causes validation to fire the moment the model is changed. It's discussed more here: http://docs.angularjs.org/guide/forms, and here http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters

answered Jul 1, 2013 at 16:09

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

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

1 Comment

Bùi Thanh Hải Over a year ago

it works! @ovi, the form field is appended with the css class "ng-invalid", but not "ng-dirty", take a look for that.

Collectives™ on Stack Overflow

Trigger custom AngularJS form validation on model change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related