typescript - Angular 2 och webbläsarens autofyll

Jag implementerar en inloggningssida med Angular reactive forms. Knappen "login" är inaktiverad om formuläret är ogiltigt.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'signin',
    templateUrl: './signin.component.html'
})
export class SignInComponent implements OnInit {
    private signInForm: FormGroup;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.buildForm();
    }

    private buildForm(): void {
        this.signInForm = this.formBuilder.group({
            userName: ['', [Validators.required, Validators.maxLength(50)]],
            password: ['', [Validators.required, Validators.maxLength(50)]]
        });

        this.signInForm.valueChanges
            .subscribe((data: any) => this.onValueChanged(data));

        this.onValueChanged();
    }

    private onValueChanged(data?: any) {
        console.log(data);
    }

Så, när jag startar det i webbläsaren har jag förifyllda fält "userName" och "passwords". Och i konsolen har jag värdena '{ userName: "[email ", password: "" }' och som resultat är knappen "login" inaktiverad. Men om jag klickar någonstans på sidan utlöser det onValueChanged och jag ser '{ userName: "[email ", password: "123456" }', och knappen "login" är aktiverad.

Om jag går in i inkognitoläge. Jag har inga förifyllda fält (de är tomma), men när jag fyller i (väljer) värden, då ser jag i konsolen '{ userName: "[email ", password: "123456" }', och knappen "login" är aktiverad utan någon extra klickning.

Kan det vara olika händelser? Autofyll och autokomplettering? Och Angular fungerar annorlunda med dem?

Vad är det bästa sättet att lösa det? Och varför körs onValueChanged-funktionen bara en gång när webbläsaren autofyll-fält?

Svar #1

Problemet i Chrome-webbläsaren: den tillåter inte åtkomst till värdet i lösenordsfältet efter autofyll (innan användaren klickar på sidan). Så, det finns två sätt:

  1. ta bort validering av lösenordsfältet;
  2. inaktivera automatisk ifyllning av lösenord.

Svar #2

Jag upptäckte att du kan använda autocomplete="new-password"

Som det beskrivs här

På det här sättet kommer dina lösenordsfält inte att fyllas i automatiskt alls, och det var mitt fall. Det finns många andra autocomplete-attribut tillgängliga i länken ovan.

Relaterade artiklar