I am using FormBuilder to generate form. On ngOnInit, I am calling a function which generates a login form. If any user saved their credentials, next time when they try to login these fields will be pre-filled with their saved credentials (username and password).
I want to get the status of form after rendering. I called ngAfterViewInit lifecycle hook but got INVALID status of the form even it has username and password are pre-filled.
Below is the code:
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.generateForm();
}
generateForm() {
this.loginForm = this.formBuilder.group({
username: [null, [Validators.required]],
password: [null, [Validators.required]],
});
}
ngAfterViewInit() {
console.log(this.loginForm.status); //INVALID
}
Didn't understand why it is showing INVALID. Is there any other lifecycle hook in which I can get the VALID status of the form if it's pre-filled?
Looking forward for the solution. Thanks in advance!
It's not possible to know the autofilled values until the user interacts with the page. (security feature of Chrome)
You can try this workaround and have a reference to the fields:
@ViewChild('usernameField')
usernameField: ElementRef;
@ViewChild('passwordField')
passwordField: ElementRef;
ngAfterViewInit(): void {
setTimeout(() => this.setValues(), 200);
}
setValues(): void {
this.loginForm.get('login').setValue(this.usernameField.nativeElement.value);
this.loginForm.get('password').setValue(this.passwordField.nativeElement.value);
}