Would like to keep submit button disabled using angular js on form load

Question

I am having html form and I would like to keep submit button disable on startup of form as by default it is enabled and takes input even if controls are empty. Here is my code. It works fine once you enter data & then removes it from input control but by default it does not.

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   <body>

      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">

         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" placeholder="name"  type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>

               <tr>
                  <td>Enter Domain name: </td>
                  <td><input name = "domain" type = "text" ng-model = "domain" placeholder="domain" required>
                     <span style = "color:red" ng-show = "studentForm.domain.$dirty && studentForm.domain.$invalid">
                        <span ng-show = "studentForm.domain.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>

               <tr>
                  <td>Email: </td><td><input name = "email" type = "email"  ng-model = "email" placeholder="Email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>

               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.domain.$dirty &&
                        studentForm.domain.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>

            </table>
         </form>
      </div>

      <script>
         var mainApp = angular.module("mainApp", []);

         mainApp.controller('studentController', function($scope) {
            $scope.reset = function(){
            }

            $scope.reset();
         });
      </script>

   </body>
</html>

The submit listener should be on the form, not the submit button as the form can be submitted without clicking the submit button. — RobG
– RobG, Commented Feb 24, 2016 at 6:38
@RobG, I thought so too, but apparently browsers (Chrome at least), doesn't let you submit a form using, say, enter, if the submit button is disabled. It does let you if the submit button is omitted, though. See fiddle. First form won't submit, while the second one will. — GolezTrol
– GolezTrol, Commented Feb 24, 2016 at 6:43
@GolezTrol—Safari and Omniweb, at least, do. And the submit listener should be on the form regardless, since once the submit button is enabled, the form can be submitted without selecting the submit button in all browsers (except some very old versions of IE). — RobG
– RobG, Commented Feb 24, 2016 at 12:11

NIket · Accepted Answer · 2016-02-24 07:18:24Z

1

You need to give $pristine for all the input elements

<button ng-disabled = "studentForm.firstname.$pristine || studentForm.domain.$pristine || studentForm.email.$pristine ||  studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.domain.$dirty && studentForm.domain.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">Submit</button>

edited Feb 24, 2016 at 7:18

answered Feb 24, 2016 at 7:17

NIket

9241 gold badge7 silver badges19 bronze badges

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

Comments

Hashir Hussain · Accepted Answer · 2016-02-24 07:19:55Z

1

This will help,

        <button ng-disabled = "studentForm.$invalid" ng-click="submit()">Submit</button>

Just need to add studentForm.firstname.$pristine || in starting of ng-disabled.

edited Feb 24, 2016 at 7:19

answered Feb 24, 2016 at 6:42

Hashir Hussain

6924 gold badges9 silver badges28 bronze badges

5 Comments

Mr x Over a year ago

Using this also when you just type the name it enables the submit button and does not throws any error for empty email & domain.

Hashir Hussain Over a year ago

No, the code works fine here, I think yo are missing something.

<button ng-disabled = "studentForm.firstname.$pristine || studentForm.firstname.$dirty &&                         studentForm.firstname.$invalid || studentForm.domain.$dirty &&                         studentForm.domain.$invalid || studentForm.email.$dirty &&                         studentForm.email.$invalid" ng-click="submit()">Submit</button>

Mr x Over a year ago

The issue is when you just enter the first name and presses the tab the submit button becomes enable.You can check it in firefox.

Hashir Hussain Over a year ago

Try <button ng-disabled = "studentForm.$invalid" ng-click="submit()">Submit</button>

Hashir Hussain Over a year ago

This will make your condition short and sensible

Dwijen · Accepted Answer · 2016-02-24 06:44:09Z

0

This always works for me -

<button ng-disabled = "!studentForm.firstname || !studentForm.domain || !studentForm.email">Submit</button>

answered Feb 24, 2016 at 6:44

Dwijen

5905 silver badges16 bronze badges

Collectives™ on Stack Overflow

Would like to keep submit button disabled using angular js on form load

3 Answers 3

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Related