Valori che scompaiono con AngularJS/UI Bootstrap personalizzato $ validator e getterSetter

Question

Il mio obiettivo è creare un DatePicker Bootstrap dell'interfaccia utente che disponga anche di una maschera di input.

La direttiva datepicker convalida solo le date scelte con la finestra popup e non le date che l'utente digita a mano, quindi ho cercato how to add custom validation per l'immissione di testo.

Ho tutto questo working in this Plunk.

Qui ci sono i pezzi importanti:

<!-- 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; 
    }); 
}); 

ora voglio fare qualcosa di semplice, che è aggiungere un getterSetter al mio ingresso in modo che io possa fare un certo lavoro sul valore prima persistente al modello.

posso cambiare il ng-model sul mio elemento, aggiungere ng-model-options fare riferimento mia getterSetter, e aggiungere il metodo effettivo getterSetter.

<!-- HTML --> 
ng-model="getSetDate" 
ng-model-options="{getterSetter: true}" 

// JavaScript 
$scope.getSetDate = function(val) { 
    if(angular.isDefined(val)) { 
    $scope.dt = val; 
    } else { 
    return val; 
    } 
}; 

Tuttavia, anche this simple Plunk withgetterSetter, che non fa nulla in sostanza introduce un errore. Se io:

1. tipo in una giornata non valida, dico 09/10/2011
2. correggerlo per un giorno valido (digitando), dire 09/10/2015
3. Il valore scompare

non riesco a capire perché l'introduzione di questo semplice getterSetter sta causando la perdita del mio valore. Dovrei implementarlo in un modo diverso?

Answer 1

Sembra che le opzioni di ng-model inclusa l'opzione getterSetter non siano effettivamente ancora supportate nel selettore di date, ma è qualcosa che desiderano implementare.

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

edit: Inoltre, ho creato un plunk che aggiorna un modello secondario attraverso la visione. Non sono sicuro che sia esattamente ciò che stai cercando, ma sembra fare una cosa simile che stavi cercando attraverso il getterSetter. In sostanza il seguente aggiunto al tuo esempio di lavoro.

$scope.dt = undefined; 
    $scope.newdt = undefined; 

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