How can I override Angular's filtering of invalid form values, forcing Angular to persist the $viewValue to $modelValue?

Question

I need to be able to temporarily persist data that isn\'t fully validated yet, then enforce validation when I\'m ready to make it permanent. But Angular is preventing that.

Answer 1

I took a stab at doing this. The basic idea is to keep the model updated whether or not the input is valid by grabbing the text right off the input element. Then, updating the view an $render with the model data, even if the view is undefined. I haven't gotten the from to change the style on load with bad data. I'm sure that's just a matter of calling $setViewValue() with something invalid then updating the element.

It's not a terribly angular way to do things. If you needed an invalid version of the form, then I might used a directive to bind think my-model-no-validation="myDirtyModel.value", but that's a task for another day.

Here is a fiddle: http://jsfiddle.net/fooby12/dqPbz/

Shortened code for directive:

angular.module('bindApp', []).
controller('bindToViewCtrl', function($scope) {
    $scope.zip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
    $scope.formData = {
        zip: '1234',
        bindToView: true
    };
}).
directive('bindToView', function($log) {
    return {
        require: 'ngModel',
        scope: {bindToViewIsOn: '&bindToView', ngModel: '='},
        link: function (scope, iElem, iAttr, ngModel) {
            if(!ngModel) return;    

            ngModel.$render = function() {
                iElem[0].value = ngModel.$viewValue || ngModel.$modelValue;  
            };

            iElem.on('blur keyup change', function() {
                scope.$apply(updateModel);
            });

            scope.$watch(function() { return scope.bindToViewIsOn(); }, function() {
                updateModel();
            });

            function updateModel(){
                if(scope.bindToViewIsOn()){  
                    scope.ngModel = iElem[0].value;
                }
            }
        }
    };
});

Example HTML:

    

         Zip Code
            
        
        $scope.formData.zip: {{formData.zip}}
        

        
            Bind to View is {{formData.bindToView ? 'On' : 'Off' }}