How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?

Question

I\'m building a form with AngularJS, and I noticed some behavior I don\'t understand.

When I assign ng-minlength=5 as an input attribute, AngularJS unbi

Answer 1

You can use {{myForm.lifeStory.$viewValue}} to get current viewValue of lifeStory (not bound to model yet). This is the sample code to solve your problem.

<span>Your life story needs to be at least 5 characters. You have entered {{myForm.lifeStory.$viewValue.length}} charaters.</span>

Refer to jsfiddle version - http://jsfiddle.net/J67jm/9/

Answer 2

You could also write a custom validator directive to restore the $viewValue for you like this:

.directive('myParser', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    priority: 1, // force the postLink below to run after other directives
    link: function (scope, element, attrs, modelCtrl) {
      modelCtrl.$parsers.push(function (viewValue) {
        return (viewValue === undefined) ? modelCtrl.$viewValue : viewValue;
      });
    }
  }
});

and use it like this:

<input name="lifeStory" type="text" ng-model="user.lifeStory" ng-minlength="5" required my-parser></input>

Example plunker: http://plnkr.co/edit/LbhF865FS8Zq5bQnpxnz?p=preview

Answer 3

Angular seems to return a value of undefined when the minlength is invalid, but you can make your own validator directive:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
  $scope.user = {};
  $scope.user.name = "";
  $scope.user.lifeStory = "";
}

myApp.directive('myMinlength', function (){ 
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModel) {
      var minlength = parseInt(attr.myMinlength); // Just for Int's sake ;)

      ngModel.$parsers.unshift(function(value) {
        value = value || '';  // Prevent the value from being undefined
        var valid = value.length >= minlength;
        ngModel.$setValidity('myMinlength', valid);
        return value;  // return the value no matter what
      });
    }
  };
});

And use it like this:

<input name='lifeStory' type="text" ng-model='user.lifeStory' my-minlength='5' required></input>

Here's the updated jsfiddle

It turns out that ngRequired has the same behavior, and can be fixed in the same way. It may be like this for all the validators?

I'd also like to know why the Angular team chose to unset the property...