Values ​​disappearing with AngularJS / UI Bootstrap custom $ validator and getterSetter

Question

My goal is to create a custom boot time pattern that also has an input mask.

The datepicker directive datepicker checks the dates selected in the pop-up window, and not the dates that the user entered manually, so I was looking for how to add custom validations for text input.

I have everyone working in this Plunk .

Here are the important bits:

 <!-- HTML --> <span>Errors: {{myForm.myDate.$error}}</span> <input name="myDate" type="text" class="form-control" ng-class="{error: myForm.myDate.$invalid && myForm.myDate.$dirty}" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min-date="'09/01/2015'" max-date="'11/11/2015'" ng-required="true" show-weeks="false" show-button-bar="false" /> // JavaScript .controller('DatepickerDemoCtrl', function ($scope) { $scope.dt = undefined; $scope.open = function($event) { $scope.opened = !$scope.opened; }; $scope.today = new Date(); }) .config(function($provide) { $provide.decorator('datepickerPopupDirective', function($delegate) { var directive = $delegate[0]; var link = directive.link; directive.compile = function() { return function(scope, iEl, iAttrs, ctrls) { link.apply(this, arguments); // use custom validator to enforce date range on hand-entered text ctrls[0].$validators.inDateRange = function(modelValue, viewValue) { console.log(modelValue, viewValue); // use the ranges provided in the attributes for the validation var enteredDate = new Date(viewValue) , min = new Date(iAttrs.minDate) , max = new Date(iAttrs.maxDate); return ctrls[0].$isEmpty(modelValue) || (min <= enteredDate && enteredDate <= max); }; // apply input mask to the text field iEl.mask('99/99/9999'); }; }; return $delegate; }); }); 

Now I want to do something simple that will add getterSetter to my input, so I can do some work on the value before continuing with it in the model.

I change ng-model to my element, add ng-model-options to my getterSetter and add the actual getterSetter method.

 <!-- HTML --> ng-model="getSetDate" ng-model-options="{getterSetter: true}" // JavaScript $scope.getSetDate = function(val) { if(angular.isDefined(val)) { $scope.dt = val; } else { return val; } }; 

However, even this simple Plunk with getterSetter , which essentially does not enter anything into the message. If I:

• Enter an invalid day, say 09/10/2011
• Correct it until the valid day (by typing), say 09/10/2015
• Value fades

I cannot understand why introducing this simple getterSetter leads to the loss of my value. Should I implement this differently?

Answer 1

It seems that the ng-model-options options, including the getterSetter option, are not yet supported in the date picker, but this is what they want to implement.

https://github.com/angular-ui/bootstrap/issues/4837

edit: In addition, I created a plunk that updates an additional model by viewing. I'm not sure if this is exactly what you are looking for exactly, but it seems like you were trying to use getterSetter. Essentially, the following has been added to your working example.

  $scope.dt = undefined; $scope.newdt = undefined; $scope.$watch('dt', function(){ if ($scope.dt) $scope.newdt = $scope.dt; });