Angular ng-disabled button on page load

Question

I'm using Angular and I have a button with an ng-disabled attribute that disables it until the user enters text in two text fields:

<input ng-model="name" type="text">
<input ng-model="password" type="password">

<input ng-disabled="name == '' || password == ''" type="submit" value="Log in" />

This works fine, however when the page first loads the button is enabled for a fraction of a second while angular loads and the browser processes the condition.

I want the button to be disabled from the instant the page loads and only enabled once the user enters text in those two fields.

Does anyone know if there is a solution to this?

Answer 1

If you want the input to be already disabled even when angular is still loading, then make the input already disabled:

<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />

However, if you want the input to be disabled to avoid the user clicking it before angular makes it disabled due to security reasons, take note this is useless. Any user with a minimum knowledge can use the browser console to remove the disabled from the input and click if they want to.

This is just aesthetics, and I personally would encourage you trying to understand why the button is taking so long to get disabled. It shouldn't take long enough so users could notice it.