[AngularJS]想要保持在加载窗体上使用角 js 禁用提交按钮

发布时间: 2017/4/16 20:39:13
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有 html 表单和我想要提交按钮禁用启动时作为窗体的默认情况下它启用和接收输入,即使控件是空的。 这里是我的代码。 它工作正常,一旦你进入数据 & 然后再移除它从输入控件,但在默认情况下它不会。

<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>

解决方法 1:

你需要给 $pristine 的所有输入的元素

<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>
官方微信
官方QQ群
31647020