Angular 2 - Форма недействительна при автозаполнении браузера

У меня есть форма входа в систему, в которой есть поля электронной почты и пароля.

Я выбрал для автозаполнения браузера.

Проблемы: при регистрации в браузере autofills, оба поля являются нетронутыми и нетронутыми, поэтому кнопка отправки отключена.

Если я нажимаю на отключенную кнопку, она включает и запускает действие отправки, что приятно. Но отключенный по умолчанию аспект довольно плох, что может заставить некоторых пользователей разочароваться.

Есть ли у вас какие-то идеи о том, как с этим бороться?

ОТВЕТЫ

Ответ 1

Я, кажется, решил эту проблему, просто имитируя щелчок на странице AfterViewInit.

public ngAfterViewInit(): void {
    $('body').click();
}

Хром 67.0.3396.99, Угловой 5.1.0

Ответ 2

Я решил эту проблему с провайдером ChangeDetectorRef.
Просто выполните ручное detectChanges() прежде чем проверять правильность ввода.

Если вы не можете проверить после нажатия кнопки, то услышите о Input-Event элемента Input с привязкой к событию (input)=changedetectorfunc() и вызовите changeDetector в этой функции.
Поэтому это должно работать.
Надеюсь, это поможет вам.

Полезные ссылки:

С наилучшими пожеланиями

Ответ 3

У меня была та же проблема.

Я решил это: - удаление валидатора Validators.required для поля пароля в компоненте - с помощью директивы <input ... required ...> в теге в шаблоне

Ответ 4

По официальным документам

"pristine" means the user hasn't changed the value since it was displayed in this form

Поэтому, если у вас есть проверка в вашей форме, лучше проверить, является ли форма "действительной" или "недействительной"

<button [disabled]="formName.invalid">Submit</button>

Поэтому не имеет значения, является ли форма нетронутой или нет.

Ответ 5

это не лучшая практика для кода, но она будет работать для sure-

если у вас двустороннее связывание, тогда его очень простая задача - просто проверить длину обоих текстовых полей, если оно больше нуля, затем вернуть false, иначе вернуть true и вызвать метод в отключенном атрибуте. Method-

    validcheck() {
         return username.length <= 0 || password.length <= 0;     
    }

и вызвать метод внутри кнопки отключен атрибут

    <button [disabled]="validcheck()">Submit</button>

Ответ 6

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

<input type="submit" class="btn btn-default" [disabled]="loginFormGroup.invalid && loginFormGroup.touched" />

Ответ 7

Была та же проблема. Я не уверен, что это лучший способ, но я смог заставить его работать, добавив AfterViewChecked

import { Component, AfterViewChecked } from "@angular/core";

export class LoginComponent implements AfterViewChecked {
    // Beware! Called frequently!
    // Called in every change detection cycle anywhere on the page
    ngAfterViewChecked() {
        console.log(`AfterViewChecked`);
        if (this.usr.userName) {
            // enable to button here.
            console.log("found username in AfterViewChecked");
        }
    }
}

или вы можете попробовать Angular2 другие Lececycle Hooks https://embed.plnkr.co/?show=preview