Angularjs ng-disabled

Question

I have two inputs for validating email and password. I can see individuals of the following works:

myForm.$error.required

validating input form with required input value and

myForm.email.$valid

validating my regex email

If i was to print i.e. {{ with the above code}} i can see the boolean result of the validation for both input and its correct. However when I use ng-disabled on button with both expression it doesnt work but if i put ng-disable with only one expression I can see it does work but I am unable to place both expression i.e.

<button type="submit" ng-disabled="myForm.$error.required && !myForm.email.$valid">Sign in</button>

Currently the result becomes true based on the first expression but i thought && meant both condition needs to be met in order to result true ? Could it be because the ouput is true + false = true ?

So, you want the button to be disabled when `myForm` contains some error related to a required field and at the same time the `email` is not valid? — lealceldeiro, Mar 10 '17 at 20:15
debug the statement with {{ myForm.$error.required && !myForm.email.$valid }}. decompose to see what is going on — hannes neukermans, Mar 10 '17 at 20:27

score 1 · Accepted Answer · answered Mar 10 '17 at 20:16

1

true + false doesn't mean true && false, it means true || false,

that's why you don't get the right behavior, so:

<button type="submit" ng-disabled="myForm.$error.required || !myForm.email.$valid">Sign in</button>

answered Mar 10 '17 at 20:16

El houcine bougarfaoui

35,805
9
37
37

Abubakr A.Hafiz · Answer 2 · 2017-03-10T20:37:52.140

0

You should use ng-disabled="myForm.$invalid" if you want to disable the button while the whole form is invalid.

In case you want to disable the button if the email is not provided or email is not valid so you should use || instead of && so the button will be disabled in both cases.

edited Mar 10 '17 at 20:37

answered Mar 10 '17 at 20:15

Abubakr A.Hafiz

269
3
10

This is more a comment than an answer. – lealceldeiro Mar 10 '17 at 20:16
Not really, it's an alternative to the question desired, but still answers it. – Sterling Archer Mar 10 '17 at 20:20

Angularjs ng-disabled

2 Answers2