Disable submit button as default state until all inputs are filled in angular js

Question

I'm trying to disable submitting the form until all fields are filled.

I've tried adding the disable option in the button but it doesn't work.

This is the form:

<form id="contactForm" name="contactForm" novalidate>
    <input type="text" name="contactName" id="contactName" placeholder="Nombre" data-ng-model="cu.contactName" ng-model-options="{ updateOn: 'blur' }" required autofocus>
    <span style="color:red" ng-show="contactForm.contactName.$dirty && contactForm.contactName.$invalid">
        <span ng-show="contactForm.contactName.$error.required">El nombre es requerido.</span>
    </span>

    <button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button>
</form>

Right now, the button gets disabled when I start typing and then deletes everything in the input, when I try to click, it gets disabled, but what I want is that the button is disabled since the beginning and then when you fill the inputs it gets unlocked or un-disabled(if that's a word).

Please help, thanks!

Enabled is the word you were looking for :)

durrrr
– durrrr

2015-11-13 19:53:34 +00:00
Commented Nov 13, 2015 at 19:53 — durrrr
– durrrr, Commented Nov 13, 2015 at 19:53

Jay · Accepted Answer · 2015-11-13 19:35:44Z

1

The angular docs are actually pretty decent for form state handling:

https://docs.angularjs.org/guide/forms

Check the second-to-last example, where they display a message if the email is invalid.

answered Nov 13, 2015 at 19:35

Jay

4524 silver badges15 bronze badges

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

Comments

Royi Namir · Accepted Answer · 2015-11-13 19:21:35Z

0

Each state of every input should be reflected in the scope/controller.

So assuming you have this :

$scope.myInputs = {};

you should ng-model each input in the view to :

ng-model = "myInputs.email";

Then , using ng-blur/ng-change you should iterate through each property in the $scope.myInputs object to see if values are filled. only then you should control the disability of the submit.

answered Nov 13, 2015 at 19:21

Royi Namir

149k145 gold badges503 silver badges833 bronze badges

Comments

Johhan Santana · Accepted Answer · 2015-11-13 20:39:25Z

0

I was able to solve this by adding this $pristine attribute:

User has not interacted with the field yet.

So my button looks now like this:

<button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid || contactForm.contactName.$pristine" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button>

Now it is disabled from the start and only enables itself once the user interacts and fill the (in this case) contactName input.

answered Nov 13, 2015 at 20:39

Johhan Santana

2,4556 gold badges35 silver badges63 bronze badges

Collectives™ on Stack Overflow

Disable submit button as default state until all inputs are filled in angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related