formcontrol - Angular 2: el formulario no es válido cuando el navegador se completa automáticamente

formcontrol angular

Question

Tengo un formulario de inicio de sesión que tiene campos de correo electrónico y contraseña.

He elegido para el navegador autocompletar.

El problema es: cuando el formulario de inicio de sesión del navegador se rellena automáticamente, ambos campos están prístinos y sin tocar, por lo que el botón de envío está deshabilitado.

Si hago clic en el botón deshabilitado, habilita y activa la acción de envío, lo que está bien. Pero el aspecto desactivado predeterminado es bastante malo, lo que puede decepcionar a algunos usuarios.

¿Tienes algunas ideas sobre cómo tratar?

Answer 1

Esta no es la mejor práctica para el código pero funcionará con seguridad.

si tiene un enlace bidireccional, entonces su tarea muy sencilla es simplemente verificar la longitud de ambos cuadros de texto si es mayor que cero, luego devuelva falso o devuelva verdadero y llame al método en el atributo deshabilitado. Método-

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

y llamar al método dentro del atributo botón desactivado

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

Answer 2

Según los documentos oficiales.

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

Por lo tanto, si tiene una validación en su formulario, es un mejor método para verificar si el formulario es "válido" o "no válido".

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

Así que no importa si la forma es prístina o no.

Answer 3

Tenía el mismo problema también. No estoy seguro si esta es la mejor manera, pero pude hacerlo funcionar agregando 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");
        }
    }
}

o tal vez pueda probar otros ganchos de ciclo de vida de Angular2 https://embed.plnkr.co/?show=preview

Answer 4

Yo tuve el mismo problema.

Lo resolví: - eliminando el validador Validators.required para el campo de contraseña en el componente - usando la directiva <input ... required ...> en la etiqueta en la plantilla

Answer 5

ChangeDetectorRef este problema con el proveedor ChangeDetectorRef .
Simplemente haga un manual detectChanges() antes de verificar si la entrada es válida.

Si no puede verificar después de hacer clic en un botón, escuche en el evento de entrada del elemento de entrada con el enlace de evento (input)=changedetectorfunc() y llame al changeDetector en esta función.
Por lo tanto debe funcionar.
Esperanza, te ayuda.

Enlaces útiles:

• https://angular.io/api/core/ChangeDetectorRef
• Evento de cambio angular 2 en cada pulsación de tecla

Los mejores deseos

Answer 6

Parece que he resuelto esto simplemente simulando un clic en la página AfterViewInit .

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

Chrome 67.0.3396.99, Angular 5.1.0