My html code in modal-login.component.html includes the following:
<input placeholder="Password" id="password" type="password" formControlName="password" class="form-input" #loginFormPassword />
In my ts file (modal-login.component.ts), the code snippet is as follows:
ngOnInit() {
for (const key of Object.keys(this.loginForm.controls)) {
if (this.loginForm.controls[key].invalid) {
// here key value is "password"
const invalidControl = this.el.nativeElement.querySelector('[formcontrolname="' + key + '"]');
invalidControl.focus(); //Here it gives me the error in console
break;
}
}
}
I have attempted the following solution, but unfortunately it's not working as expected. While I do not receive an error, the input field for password does not capture focus:
public ngAfterViewInit(): void {
console.log(this.el.nativeElement);
this.el.nativeElement.focus();
}
Upon inspection, the browser console displays the following error message:
core.js:6014 ERROR TypeError: Cannot read property 'focus' of null
Any insights on what might be causing this issue would be greatly appreciated. Thank you!