ng-modèle ne fonctionne pas avec angulaire ui datepicker

Comme je l'ai mentionné dans mon commentaire, ce qui se passe est que le datepicker directive est en train de changer le modèle de la valeur à partir d'un String à un Date objet. Lorsque ngPattern essayé de valider les Date objet qu'il va échouer, car la chaîne de valeur d'un Date ne va pas correspondre à la forme que vous utilisez.

Ce que vous pouvez faire est de créer votre propre directive qui raccorde le $analyseurs de la ngModelController pour exécuter votre modèle de vérifier et d'appel $setValidity() basé sur ce qui a de la valeur. $parsers est effectivement construit pour ce type de fonctionnalité où vous souhaitez exécuter vos propres validation sur un ngModel valeur.

À la suite de ces balles est une directive qui permettra d'atteindre la fonctionnalité que vous souhaitez. Je tiens à expliquer la logique de la directive avant que je vous montre le code:

• Afin d'ajouter votre propre $parser, vous devez ajouter un besoin pour ngModel dans votre définition de la directive, de sorte que vous pouvez accéder à la ngModelController
• Parce que RegExp attend le motif argument sans début et à la slash de fin, je l'ai enlevé dans le modèle de la directive argument
• datepicker les changements de la valeur de modèle à partir d'un String à un Date. Depuis datepicker utilise unshift à ajouter, c'est $analyseur de fonction pour le début de la $parsers tableau, nous avons également besoin d'utiliser unshift de mettre notre $parser avant datepicker's $parser.
• Comme vous l'avez mentionné, la datepicker directive prendre n'importe quelle valeur que l'on peut analyser en une date et à l'utilisation que pour le modèle. Afin de s'assurer que seules les dates qui correspondent à la forme sont utilisés, je suis de retour undefined (comme indiqué dans les docs) pour les dates qui ne correspondent pas au modèle. Je ne vais pas faire cette vérification pour les valeurs qui viennent dans une Date objet puisque cela signifie qu'il a été choisi à l'aide de la datepicker widget.
• Que j'ai juste évoqué dans le point précédent, je ne vais pas faire la validité de vérifier si la valeur est déjà un Date objet puisque cela signifie qu'il a été choisi à l'aide de la datepicker widget qui signifie qu'il a une date de validité.

directive code

app.directive('awDatepickerPattern',function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope,elem,attrs,ngModelCtrl) {
      var dRegex = new RegExp(attrs.awDatepickerPattern);

      ngModelCtrl.$parsers.unshift(function(value) {

        if (typeof value === 'string') {
          var isValid = dRegex.test(value);
          ngModelCtrl.$setValidity('date',isValid);
          if (!isValid) {
            return undefined;
          }
        }

        return value;
      });

    }
  };
});

html - assurez-vous que vous n'oubliez pas de supprimer le début et la barre oblique dans la regex définition:

aw-datepicker-pattern="^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$"

Et voici une mise à jour de plunker avec mon code.

Alors pourquoi encore ne pas ng-travail de modèle?

Dans le cas où vous n'aviez pas remarqué la racine cause pour laquelle ng-modèle ne fonctionne pas lorsqu'il est utilisé avec le datepicker directive est parce que le datepicker directive ajoute sa propre ngModelController $parser à la début de l' $analyseurs de tableau à l'aide de unshift, ce qui change la valeur de modèle à partir d'un String à un Date.

OriginalL'auteur JoseM

La directive ci-dessus plunker ne fonctionne que lorsque la date est nécessaire. Je l'ai corrigé en modifiant la directive comme suit:

ngModelCtrl.$setValidity('datep',isValid);

Depuis le sélecteur de date court après cette directive, il définit des "date" retour à l'valide.

OriginalL'auteur Rory G