A. Gladkiy A. Gladkiy -4 years ago 229
TypeScript Question

Angular 2 and browser autofill

I'm implementing login page with Angular reactive forms. Button "login" is disabled if form is invalid.

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);
}


So, when I launch it in browser, I have prepopulated fields "userName" and "passwords". And in console I have values '{ userName: "email@email.com", password: "" }' and as a result button "login" is disabled. But if I click somewhere on page it trigger onValueChanged and I see '{ userName: "email@email.com", password: "123456" }', and button "login" is enabled.

If I go in incognito mode. I have no prepopulated fields (they are empty), but when I populate (select) values, then in console I see '{ userName: "email@email.com", password: "123456" }', and button "login" is enabled without any extra click.

May be they are different events? Autofill and autocomplete? And angular works with them differently?

What is the best way to resolve it? And why onValueChanged function is executed only once when browser autofill fields?

Answer Source

The problem in Chrome browser: it does not allow access to the value of the password field after autofill (before user click on the page). So, there are two ways:

  1. remove validation of the password field;
  2. disable password autocompletion.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download