Запомнить пароль с помощью AngularJS и ng-submit

Как заставить браузер запрашивать у пользователя пароль при использовании ng-submit в одностраничном приложении AngularJS.

Моя форма:

<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
    <input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
    <input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
    <button type="submit" class="btn">Submit</button>
</form>

Любые идеи?

UPDATE

Я только что добавил действие, чтобы браузер узнал форму и обманул ее, вспомнив пароль. (что явно не сработало.) Форма отлично работает без действия. onsubmit="return false;" предотвращает выполнение действия. Только ng-submit что-то делает.

Ответ 1

Проблема заключается в динамически созданной форме входа. После размещения формы в index.html она работала так, как ожидалось. Я думаю, это проблема безопасности.

Проблема, которая возникла тогда, заключалась в том, что ngModels не обновлялись на автозаполнение. После некоторого поиска я нашел решение этой проблемы здесь. В AngularJS 1.2+ предполагается, что это исправлено.

Ответ 2

Ваш код в порядке, но вам нужно добавить атрибуты имени в свои поля ввода, например:

<input type="text" name="username" ...>

<input type="password" name="password" ...>

Ответ 3

Ваша форма HTML немного запутанна.

<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">

Когда форма отправлена, вы хотите, чтобы она переходила к /#/dashboard/login или do ng-submit="login()"? На данный момент ng-submit игнорируется в пользу действия формы. Если вы хотите, чтобы он перешел на /#/dashboard/login в качестве новой страницы, просто удалите атрибуты ng-submit и onsubmit, и он будет работать как обычно.

Если вы хотите, чтобы он выполнял ng-submit="login()", удалите атрибуты action и onsubmit. Angular автоматически предотвращает отправку формы, когда форма с ng-submit также не имеет атрибута действия. Выполнение этого способа остановит браузер как напоминание пароля, поскольку форма фактически не отправлена нигде. Я предполагаю, что это область, где браузеру еще предстоит догнать эпоху одностраничного приложения, там нет прямого исправления, о котором я знаю.

Обходным путем было бы иметь отдельную скрытую форму в HTML, установить там имя пользователя/пароль так же, как пользователь входит в основную форму, а затем отправить эту скрытую форму в iframe одновременно с ng- submit называется - посмотрите Как я могу заставить браузер запрашивать пароль? для представления о том, как это сделать.

Ответ 4

Мне не нужно было ничего особенного. Но я заметил, что в то время как MS Edge и Firefox хорошо работали и предлагали запомнить учетные данные, Chrome не сделал.

Итак, просто указав атрибут имени для формы входа в систему, а также имя пользователя и пароль, он отлично работает в Chrome. Автозаполнение включено. Пример:

<form method="post" class="form-horizontal well" ng-submit="login()">
        <div class="form-group">
            <label class="col-sm-4 control-label">Email Address</label>
            <div class="col-sm-8">
                <input name="username" ng-model="email" type="email" class="form-control" placeholder="[email protected]" autofocus="autofocus" autocomplete="on" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">Password</label>
            <div class="col-sm-8">
                <input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button type="submit" class="btn btn-primary">Log on</button>
            </div>
        </div>
    </form>

PS: Я использую Chrome Version 45.0.2454.93 m

Ответ 5

Виновником является "return false"; сверху onsubmit. Удалите это, и вам хорошо идти. ng-submit позаботится об остальном, например, о том, что вы не отправляете форму, когда вы нажимаете ввод в поле или нажмите кнопку отправки.