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?

Please have a look at the angular custom lifecycle hooks. angular.io/guide/lifecycle-hooks. You can get the reference of the button using elementRef and probably add custom logic on these life cycle hooks. NgOnInit() is what you could be looking at — Varun Pozhath
– Varun Pozhath, Commented Sep 19, 2017 at 22:12

Alisson Reinaldo Silva · Accepted Answer · 2017-09-19 22:14:35Z

2

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.

answered Sep 19, 2017 at 22:14

Alisson Reinaldo Silva

10.8k5 gold badges75 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K. Rawls Over a year ago

Perfect. Thank you.

Collectives™ on Stack Overflow

Angular ng-disabled button on page load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related