Angular 2 - Formularz jest nieprawidłowy przy automatycznym uzupełnianiu przeglądarki

Question

Mam formularz logowania, który zawiera pola e-mail i hasło.

Wybrałem dla autouzupełniania przeglądarki.

Problem polega na tym, że gdy przeglądarka automatycznie wypełnia formularz logowania, oba pola są nieskazitelne i nienaruszone, dlatego przycisk przesyłania jest wyłączony.

Po kliknięciu wyłączonego przycisku włącza i uruchamia akcję, co jest miłe. Ale domyślny wyłączony aspekt jest dość zły, co może spowodować rozczarowanie niektórych użytkowników.

Masz pomysły na temat tego, jak sobie poradzić?

Answer 1

Miał ten sam problem. Nie jestem pewien, czy jest to najlepszy sposób, ale udało mi się dostać do pracy poprzez dodanie 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"); 
     } 
    } 
} 

lub może być w stanie spróbować Angular2 Inne Lifecycle Haki https://embed.plnkr.co/?show=preview

Answer 2

miałem ten sam problem.

Rozwiązałem go: - usuwanie Validators.required walidator na polu hasła w składniku - za pomocą dyrektywy <input ... required ...> w znaczniku w szablonie