当表单与AngularJS无效时，禁用提交按钮

6 回答

• 1

  您需要使用表单的名称以及ng-disabled：Here's a demo on Plunker

  <form name="myForm">
      <input name="myText" type="text" ng-model="mytext" required />
      <button ng-disabled="myForm.$invalid">Save</button>
  </form>
  

  回复于 2024-05-11T03:35:55+08:00
• 26

  添加到这个答案 . 我刚刚发现如果你在表单名称（Angular 1.3）中使用连字符，它也会崩溃：

  所以这将 not 工作：

  <form name="my-form">
      <input name="myText" type="text" ng-model="mytext" required />
      <button ng-disabled="my-form.$invalid">Save</button>
  </form>
  

  回复于 2024-05-11T03:35:55+08:00
• 319

  选择的响应是正确的，但像我这样的人，可能会遇到异步验证问题，并向服务器端发送请求 - 在给定的请求处理期间，按钮不会被禁用，因此按钮将闪烁，这对用户来说看起来很奇怪 .

  要使其无效，您只需处理表单的$ pending状态：

  <form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
  </form>
  

  回复于 2024-05-11T03:35:55+08:00
• 31

  如果您使用的是Reactive Forms，则可以使用：

  <button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
  

  回复于 2024-05-11T03:35:55+08:00
• 0

  我们可以创建一个简单的指令并禁用该按钮，直到填写所有必填字段 .

  angular.module('sampleapp').directive('disableBtn',
  function() {
   return {
    restrict : 'A',
    link : function(scope, element, attrs) {
     var $el = $(element);
     var submitBtn = $el.find('button[type="submit"]');
     var _name = attrs.name;
     scope.$watch(_name + '.$valid', function(val) {
      if (val) {
       submitBtn.removeAttr('disabled');
      } else {
       submitBtn.attr('disabled', 'disabled');
      }
     });
    }
   };
  }
  );
  

  For More Info click here

  回复于 2024-05-11T03:35:55+08:00
• 2

  <form name="myForm">
          <input name="myText" type="text" ng-model="mytext" required/>
          <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
  </form>
  

  如果你想要更严格一点

  回复于 2024-05-11T03:35:55+08:00