Solution de contournement de remplissage automatique du navigateur AngularJS à l'aide d'une directive

Lorsque vous soumettez un formulaire dans AngularJS et utilisez la fonctionnalité de mémorisation du mot de passe du navigateur, et lors d'une tentative de connexion ultérieure, vous laissez le navigateur remplir le formulaire de connexion avec le nom d'utilisateur et le mot de passe, le $scopemodèle ne sera pas modifié en fonction de la saisie automatique.

Le seul hack sale que j'ai trouvé est d'utiliser la directive suivante:

app.directive("xsInputSync", ["$timeout" , function($timeout) {
    return {
        restrict : "A",
        require: "?ngModel",
        link : function(scope, element, attrs, ngModel) {
            $timeout(function() {
                if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) {
                    scope.apply(function() {
                        ngModel.$setViewValue(element.val());
                    });
                }
                console.log(scope);
                console.log(ngModel.$name);
                console.log(scope[ngModel.$name]);
            }, 3000);
        }
    };
}]);

Le problème est que le ngModel.$setViewValue(element.val());ne modifie pas le modèle ni la vue en fonction de la element.val()valeur renvoyée. Comment puis-je y parvenir?

Apparemment, il s'agit d'un problème connu avec Angular et est actuellement ouvert

Je ne sais pas ce que vous pourriez faire ici en plus d'une sorte de travail comme vous essayez. Il semble que vous êtes sur la bonne voie. Je n'ai pas pu faire en sorte que mon navigateur essaie de se souvenir d'un mot de passe pour votre plunk, donc je ne suis pas sûr que cela fonctionnera, mais jetez un œil:

app.directive('autoFillSync', function($timeout) {
   return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModel) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(ngModel.$pristine && origVal !== newVal) {
                  ngModel.$setViewValue(newVal);
              }
          }, 500);
      }
   }
});

<form name="myForm" ng-submit="login()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
   <button type="submit">Login</button>
</form>

Je pense que vous avez juste besoin de simplifier un peu votre approche. La seule chose que je recommande vraiment est de vérifier ngModel.$pristineet de vous assurer que vous n'écrasez pas les entrées d'un utilisateur médiocre. De plus, 3 secondes, c'est probablement trop long. Vous ne devriez pas avoir à appeler $ apply () dans un $ timeout, BTW, il devrait mettre en file d'attente un $ digest pour vous automatiquement.

Le vrai hic: votre navigateur battra-t-il Angular à l'exécution? Et mon navigateur?

C'est probablement une guerre impossible à gagner, c'est pourquoi Angular (ou Knockout) n'a pas été en mesure de la résoudre facilement. Il n'y a aucune garantie de l'état des données dans votre entrée au moment de l'exécution initiale de la directive. Pas même au moment de l'initialisation d'Angular ... C'est donc un problème délicat à résoudre.

Voici une solution beaucoup moins hacky que les autres solutions présentées et qui est sémantiquement saine AngularJS: http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/

myApp.directive('formAutofillFix', function() {
  return function(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').submit(function(e) {
          e.preventDefault();
          elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

Ensuite, vous attachez simplement la directive à votre formulaire:

<form ng-submit="submitLoginForm()" form-autofill-fix>
  <div>
    <input type="email" ng-model="email" ng-required />
    <input type="password" ng-model="password" ng-required />
    <button type="submit">Log In</button>
  </div>
</form>

Vous n'avez pas besoin d'utiliser un $timeoutou quelque chose comme ça. Vous pouvez utiliser un système d'événements.

Je pense que c'est plus angulaire et ne dépend pas de jQuery ou de la capture d'événements personnalisés.

Par exemple sur votre gestionnaire d'envoi:

$scope.doLogin = function() {
    $scope.$broadcast("autofill:update");

    // Continue with the login.....
};

Et puis vous pouvez avoir une autofilldirective comme celle-ci:

.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    }
});

Enfin, votre HTML sera comme:

<input type="text" name="username" ng-model="user.id" autofill="autofill"/>

Plus besoin de pirater! Angular dev tbosch a créé un polyfill qui déclenche un événement de modification lorsque le navigateur modifie les champs du formulaire sans déclencher d'événement de modification:

https://github.com/tbosch/autofill-event

Pour l'instant, ils ne l'intégreront pas dans le code Angular, car il s'agit d'un correctif pour le navigateur, et fonctionne également sans Angular (par exemple pour les applications jQuery simples).

"Le polyfill vérifiera les modifications lors du chargement du document et également lorsqu'une entrée est laissée (uniquement sous la même forme). Cependant, vous pouvez déclencher la vérification manuellement si vous le souhaitez.

Le projet comporte des tests unitaires ainsi que des tests semi-automatiques, nous avons donc enfin un endroit pour collecter tous les différents cas d'utilisation avec les paramètres de navigateur requis.

Remarque: ce polyfill fonctionne avec les applications AngularJS simples, avec les applications AngularJS / jQuery mais aussi avec les applications jQuery simples qui n'utilisent pas Angular. "

Il peut être installé avec:

bower install autofill-event --save

Ajoutez le script autofill-event.js après jQuery ou Angular dans votre page.

Cela fera ce qui suit:

• après DOMContentLoaded: vérifiez tous les champs de saisie
• il reste un champ: vérifiez tous les autres champs du même formulaire

API (pour déclencher manuellement la vérification):

• $el.checkAndTriggerAutoFillEvent(): Exécute la vérification de tous les éléments DOM dans l'élément jQuery / jQLite donné.

Comment ça fonctionne

1. Souvenez-vous de toutes les modifications apportées aux éléments d'entrée par l'utilisateur (à l'écoute des événements de modification) et également par JavaScript (en interceptant $ el.val () pour les éléments jQuery / jQLite). Cette valeur modifiée est stockée sur l'élément dans une propriété privée.

2. Vérification d'un élément pour le remplissage automatique: Comparez la valeur actuelle de l'élément avec la valeur mémorisée. Si c'est différent, déclenchez un événement de modification.

Dépendances

AngularJS ou jQuery (fonctionne avec l'un ou les deux)

Plus d'informations et source sur la page github .

Le problème angulaire original n ° 1460 sur Github peut être lu ici.

Code sale, vérifiez si le problème https://github.com/angular/angular.js/issues/1460#issuecomment-18572604 est résolu avant d'utiliser ce code. Cette directive déclenche des événements lorsque le champ est rempli, pas seulement avant de soumettre (c'est nécessaire si vous devez gérer l'entrée avant de soumettre)

 .directive('autoFillableField', function() {
    return {
                   restrict: "A",
                   require: "?ngModel",
                   link: function(scope, element, attrs, ngModel) {
                       setInterval(function() {
                           var prev_val = '';
                           if (!angular.isUndefined(attrs.xAutoFillPrevVal)) {
                               prev_val = attrs.xAutoFillPrevVal;
                           }
                           if (element.val()!=prev_val) {
                               if (!angular.isUndefined(ngModel)) {
                                   if (!(element.val()=='' && ngModel.$pristine)) {
                                       attrs.xAutoFillPrevVal = element.val();
                                       scope.$apply(function() {
                                           ngModel.$setViewValue(element.val());
                                       });
                                   }
                               }
                               else {
                                   element.trigger('input');
                                   element.trigger('change');
                                   element.trigger('keyup');
                                   attrs.xAutoFillPrevVal = element.val();
                               }
                           }
                       }, 300);
                   }
               };
});

Cela ressemble à une solution claire et directe. Aucun jQuery nécessaire.

METTRE À JOUR:

• Le modèle est mis à jour uniquement lorsque la valeur du modèle n'est pas égale à la valeur d'entrée réelle.
• La vérification ne s'arrête pas au premier remplissage automatique. Dans le cas où vous souhaitez utiliser un autre compte par exemple.

app.directive('autofillable', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            scope.check = function(){
                var val = elem[0].value;
                if(ctrl.$viewValue !== val){
                    ctrl.$setViewValue(val)
                }
                $timeout(scope.check, 300);
            };
            scope.check();
        }
    }
}]);

Solution 1 [Utilisation de $ timeout]:

Directif:

app.directive('autoFillSync', function($timeout) {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, model) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(model.$pristine && origVal !== newVal) {
                  model.$setViewValue(newVal);
              }
          }, 500);
      }
    };
});

HTML:

<form name="myForm" ng-submit="login()">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
  <button type="submit">Login</button>
</form>

Solution 2 [Utilisation d'événements angulaires]:

Réf: réponse de Becko

Directif:

app.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    };
});

HTML:

<form name="myForm" ng-submit="login()">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" ng-model="username" autofill/><br/>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" ng-model="password" autofill/><br/>
  <button type="submit">Login</button>
</form>

Solution 3 [Utilisation des appels de méthode de relais]:

Directif:

app.directive('autoFill', function() {
    return {
        restrict: 'A',
        link: function(scope,element) {
            scope.submit = function(){
                scope.username = element.find("#username").val();
                scope.password = element.find("#password").val();
                scope.login();//call a login method in your controller or write the code here itself
            }

        }
    };
});

HTML:

<form name="myForm" auto-fill ng-submit="submit()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" />
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" />
   <button type="submit">Login</button>
</form>

Eh bien, le moyen le plus simple est d'émuler le comportement du navigateur, donc s'il y a un problème avec l'événement de changement, lancez-le vous-même. Beaucoup plus simple.

Directif:

yourModule.directive('triggerChange', function($sniffer) {
    return {
        link : function(scope, elem, attrs) {
            elem.on('click', function(){
                $(attrs.triggerChange).trigger(
                    $sniffer.hasEvent('input') ? 'input' : 'change'
                );
            });
        },
        priority : 1
    }
});

HTML:

<form >
    <input data-ng-model="user.nome" type="text" id="username">

    <input data-ng-model="user.senha" type="password" id="password" >

    <input type="submit" data-ng-click="login.connect()" id="btnlogin" 
           data-trigger-change="#password,#username"/>
</form>

Vous pouvez faire quelques variantes, comme mettre la directive sur le formulaire et déclencher l'événement sur toutes les entrées avec la classe .dirty lors de la soumission du formulaire.

C'est la manière jQuery:

$(window).load(function() {
   // updates autofilled fields
   window.setTimeout(function() {
     $('input[ng-model]').trigger('input');
   }, 100);
 });

C'est la manière angulaire:

 app.directive('autofill', ['$timeout', function ($timeout) {
    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            $timeout(function(){
                $(elem[0]).trigger('input');
                // elem.trigger('input'); try this if above don't work
            }, 200)
        }
    }
}]);

HTML

<input type="number" autofill /> 

Voici une autre solution de contournement qui est moins piratée, mais nécessite du code supplémentaire dans le contrôleur.

HTML:

<form ng-submit="submitForm()" ng-controller="FormController">
    <input type="text" ng-model="username" autocomplete-username>
    <input type="submit">
</form>

Directive (CoffeeScript):

directives.directive 'autocompleteUsername', ->
    return (scope, element) ->
        scope.getUsername = ->
            element.val()

Manette:

controllers.controller 'FormController', [->
    $scope.submitForm = ->
        username = $scope.getUsername?() ? $scope.username
        # HTTP stuff...
]

C'est la seule solution que j'ai trouvée qui a permis à toutes mes validations Angular de fonctionner comme prévu, y compris la désactivation / l'activation du bouton d'envoi. S'installe avec bower et 1 balise de script. Bazinga!

https://github.com/tbosch/autofill-event

Changer la valeur du modèle au lieu d'utiliser une fonction de délai d'expiration a fonctionné pour moi.

Voici mon code:

module.directive('autoFill', [ function() {
    return {
        require: 'ngModel',
        link:function(scope, element, attr, ngModel) {
            var origVal = element.val();
            if(origVal){
                ngModel.$modelValue = ngModel.$modelValue || origVal;
            }
        }
    };
}]);

Solution de contournement en une ligne dans le gestionnaire de soumission (nécessite jQuery):

if (!$scope.model) $scope.model = $('#input_field').val();

Je force un $ setValue (val ()) lors de la soumission: (cela fonctionne sans jQuery)

   var ValidSubmit = ['$parse', function ($parse) {
    return {
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, element, iAttrs, controller) {
                    var form = element.controller('form');
                    form.$submitted = false;
                    var fn = $parse(iAttrs.validSubmit);
                    element.on('submit', function(event) {
                        scope.$apply(function() {
                            var inputs = element.find('input');
                            for(var i=0; i < inputs.length; i++) {
                                var ele = inputs.eq(i);
                                var field = form[inputs[i].name];
                                field.$setViewValue(ele.val());
                            }
                            element.addClass('ng-submitted');
                            form.$submitted = true;
                            if(form.$valid) {
                                fn(scope, {$event:event});
                            }
                        });
                    });
                    scope.$watch(function() { return form.$valid}, function(isValid) {
                        if(form.$submitted == false) return;
                        if(isValid) {
                            element.removeClass('has-error').addClass('has-success');
                        } else {
                            element.removeClass('has-success');
                            element.addClass('has-error');
                        }
                    });
                }
            }
        }
    }
}]
app.directive('validSubmit', ValidSubmit);

Je suis très nouveau sur Angularjs, mais j'ai trouvé une solution simple à ce problème => Forcer Angular à réévaluer l'expression ... en la changeant! (bien sûr, vous devez vous souvenir de la valeur initiale pour revenir à l'état initial) Voici comment cela se passe dans la fonction de votre contrôleur pour soumettre le formulaire:

    $scope.submit = function () {
                var oldpassword = $scope.password;
                $scope.password = '';
                $scope.password = oldpassword;
//rest of your code of the submit function goes here...

où bien sûr, la valeur entrée dans votre saisie de mot de passe a été définie par Windows et non par l'utilisateur.

Vous pouvez essayer ce code:

yourapp.directive('autofill',function () {

    return {
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var origVal = elem.val();
            if (origVal != '') {
                elem.trigger('input');
            }
        }
    }
});

Une modification mineure à cette réponse ( https://stackoverflow.com/a/14966711/3443828 ): utilisez un $ intervalle au lieu d'un $ timeout pour ne pas avoir à courir le navigateur.

mod.directive('autoFillSync', function($interval) {
    function link(scope, element, attrs, ngModel) {
        var origVal = element.val();
        var refresh = $interval(function() {
          if (!ngModel.$pristine) {
            $interval.cancel(refresh);
          }else{
            var newVal = element.val();
            if (origVal !== newVal) {
              ngModel.$setViewValue(newVal);
              $interval.cancel(refresh);
            }
          }
        }, 100);
    }

    return {
      require: 'ngModel',
      link: link
    }
  });

C'est la solution que j'ai fini par utiliser dans mes formulaires.

.directive('autofillSync', [ function(){
  var link = function(scope, element, attrs, ngFormCtrl){
    element.on('submit', function(event){
      if(ngFormCtrl.$dirty){
        console.log('returning as form is dirty');
        return;
      }   
      element.find('input').each(function(index, input){
        angular.element(input).trigger('input');
      }); 
    }); 
  };  
  return {
    /* negative priority to make this post link function run first */
    priority:-1,
    link: link,
    require: 'form'
  };  
}]);

Et le modèle du formulaire sera

<form autofill-sync name="user.loginForm" class="login-form" novalidate ng-submit="signIn()">
    <!-- Input fields here -->
</form>

De cette façon, j'ai pu exécuter tous les analyseurs / formateurs que j'ai sur mon ng-model et avoir la fonctionnalité d'envoi transparente.

Solution sans directives:

.run(["$window", "$rootElement", "$timeout", function($window, $rootElement, $timeout){

        var event =$window.document.createEvent("HTMLEvents");
        event.initEvent("change", true, true);

        $timeout(function(){

            Array.apply(null, $rootElement.find("input")).forEach(function(item){
                if (item.value.length) {
                    item.$$currentValue = item.value;
                    item.dispatchEvent(event);
                }
            });

        }, 500);
    }])

Il s'agit d'une solution simple qui fonctionne pour tous les cas que j'ai testés à la fois dans Firefox et Chrome. Notez qu'avec la première réponse (directive w / timeout), j'ai eu des problèmes avec -

• Boutons Précédent / Suivant du navigateur, ne relancez pas les événements de chargement de page (donc le correctif ne s'applique pas)
• Chargement des informations d'identification quelque temps après le chargement de la page. Par exemple, dans Firefox, double-cliquez sur la boîte de connexion et sélectionnez parmi les informations d'identification stockées.
• Besoin d'une solution qui se met à jour avant l'envoi du formulaire car je désactive le bouton de connexion jusqu'à ce qu'une entrée valide soit fournie

Ce correctif est évidemment très stupide et piraté, mais cela fonctionne 100% du temps -

function myScope($scope, $timeout) {
    // ...
    (function autoFillFix() {
        $timeout(function() { 
            $('#username').trigger('change'); 
            $('#password').trigger('change'); 
            autoFillFix(); }, 500);                    
    })();
}

Aucune de ces solutions n'a fonctionné pour mon cas d'utilisation. J'ai quelques champs de formulaire qui utilisent ng-change pour surveiller les changements. L'utilisation $watchn'est d'aucune aide car elle n'est pas déclenchée par la saisie automatique. Comme je n'ai pas de bouton d'envoi, il n'y a pas de moyen facile d'exécuter certaines des solutions et je n'ai pas réussi à utiliser les intervalles.

J'ai fini par désactiver le remplissage automatique - pas idéal mais beaucoup moins déroutant pour l'utilisateur.

<input readonly onfocus="this.removeAttribute('readonly');">

J'ai trouvé la réponse ici

Si vous utilisez jQuery, vous pouvez le faire en soumettant le formulaire:

HTML:

<form ng-submit="submit()">
    <input id="email" ng-model="password" required 
           type="text" placeholder="Your email">
    <input id="password" ng-model="password" required 
           type="password" placeholder="Password">
</form>

JS:

 $scope.submit = function() {
     $scope.password = $('#password').val();
}

Si vous voulez rester simple, obtenez simplement la valeur en utilisant javascript

Dans votre contrôleur angular js:

var username = document.getElementById ('username'). value;