We have a login page for our application with three fields: "user name," "password," and a "login" button. Here's the issue I'm facing:
- I enter a valid user name.
- Then, I open the Browser Developer Tools and input the following code:
document.getElementsByTagName("input").item(0).value = "";
This code clears the value in the "User Name" field. However, despite being empty, the form remains valid, allowing me to still login by simply clicking the enabled "login" button without entering anything in the "username" field.
The login page utilizes reactive forms.
To resolve this issue, I need to either disable the "login" button when the username input is cleared or make the form invalid as soon as the username input value is cleared.