AngularJS "ng-submit" ha problemi quando il browser precompila i campi del modulo?

Question

Sono abbastanza nuovo per AngularJS e sto sperimentando un'applicazione a pagina singola con un modulo di "accesso". Il modulo è vincolato da "ng-submit" e il suo controllore effettua una chiamata AJAX restituendo un token se l'autenticazione ha avuto successo. Le chiamate AJAX successive passano questo token. (No, NON voglio usare l'autenticazione di base, perché voglio un pulsante "logout" non hacky).

Ho installato il mio nome utente e password campi con "necessaria", in modo che AngularJS verrà visualizzato un tooltip quando gli utenti tentano di inviare il modulo con un valore vuoto in un campo:

<form name="loginForm" ng-submit="login()"> 
    <fieldset> 
     <legend>Sign In</legend> 
     <label>Email</label> 
     <input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required> 
     <label>Password</label> 
     <input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required> 
     <br/> 
     <button type="submit" class="btn">Login</button> 
    </fieldset> 
</form> 

Il problema sorge quando alcuni browser (Firefox, almeno) chiede se l'utente desidera che il browser ricordi il nome utente e la password e lo precompila la volta successiva.

Quando il browser popola uno di questi campi, AngularJS smette di funzionare. Il modulo "ng-submit" non verrà inviato ... la funzione di controllo associata non viene invocata affatto. Il mio primo pensiero è stato che i campi precompilati non attivassero un evento, quindi AngularJS pensa che siano ancora vuoti. Tuttavia, non ci sono suggerimenti per apparire sui campi vuoti. È come se AngularJS fosse completamente spento.

Stranamente, non appena si esegue NESSUNA modifica manuale su entrambi i campi, AngularJS torna in vita ... le descrizioni dei comandi di convalida e l'invio dei moduli ricominciano a funzionare.

C'è un bug qui, o c'è il problema con la mancanza di conoscenza da parte mia? Come si può rendere AngularJS in grado di riconoscere i campi popolati dal browser? O se ci sono problemi in quest'area, come puoi impedire al browser di precompilare i campi in modo che non interferiscano con AngularJS?

Answer 1

Il problema deriva dal fatto che il browser non invia eventi sul riempimento automatico. È stato segnalato come un problema su Angular's BT.

https://github.com/angular/angular.js/issues/1460

ma dubito che sarà fissato dalla angolare fin dalla sua più un problema di browser.

Quindi la soluzione è fare alcuni hack sporchi come impostare un timer e impostare lo stato del modello su 'sporco' o attivare eventi dal modulo.

si possono vedere alcuni tentativi qui AngularJS browser autofill workaround by using a directive

Answer 2

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