AngularJS "ng-submit" ma problemy, gdy przeglądarka wypełnia pola formularza?

Question

Jestem całkiem nowy w AngularJS i eksperymentuję z aplikacją jednostronicową z formularzem "logowania". Formularz jest związany "ng-submit", a jego kontroler sprawia, że ​​wywołanie AJAX zwraca token, jeśli uwierzytelnienie zakończyło się pomyślnie. Kolejne wywołania AJAX przekazują ten token. (Nie, NIE chcę używać podstawowego uwierzytelnienia, ponieważ chcę mieć niehackowy przycisk "wylogowania").

mam setup nazwę użytkownika i hasło Pola z „wymagane”, tak aby angularjs wyświetli podpowiedź, gdy użytkownicy próbują przesłać formularz z pustą wartość w polu:

<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> 

Problem pojawia się, gdy niektóre przeglądarki (przynajmniej Firefox) pyta, czy użytkownik chce, aby przeglądarka zapamiętała nazwę użytkownika i hasło, a następnie zapełni ją następnym razem.

Gdy przeglądarka zapełnia jedno z tych pól, AngularJS zasadniczo przestaje działać. Formularz "ng-submit" nie zostanie przesłany ... funkcja kontrolera nie jest w ogóle wywoływana. Na początku myślałem, że wstępnie wypełnione pola nie wywołują zdarzenia, więc AngularJS uważa, że ​​nadal są puste. Jednak nie pojawiają się żadne podpowiedzi do ostrzeżenia o pustych polach. To tak, jakby AngularJS całkowicie się wyłączył.

Co dziwne, zaraz po wykonaniu dowolnej ręcznej edycji do dowolnego z tych pól, AngularJS powraca do życia ... etykiety narzędzi sprawdzania poprawności i przesyłania formularzy zaczynają działać ponownie.

Czy jest tu błąd, czy też problem z brakiem wiedzy na mój temat? Jak sprawić, by AngularJS rozpoznawał pola wypełniane przez przeglądarkę? Lub jeśli występują problemy w tym obszarze, w jaki sposób można zapobiec przeglądaniu pól w przeglądarce, aby nie zakłócały one działania AngularJS?

Answer 1

Problem wynika z tego, że przeglądarka nie wysyła żadnych zdarzeń podczas automatycznego wypełniania. Zostało to zgłoszone jako błąd w BT firmy Angular.

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

Ale wątpię, zostanie ona ustalona z kątowa od jego dalszych emisji przeglądarki.

Rozwiązaniem jest więc wykonanie pewnych brudnych hacków, takich jak ustawienie timera i ustawienie stanu modelu na "brudny" lub wyzwalanie zdarzeń z formularza.

Można zobaczyć kilka prób tutaj 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); 
});