AngularJS：使用ng-click时未填完表单禁用提交按钮的实现

看来你在AngularJS表单验证上碰到了两个典型问题，我来给你捋清楚解决方案：

AngularJS自带的表单状态管理刚好能解决这个问题，只要做好这几步：

• 给每个表单都设置唯一的name属性（比如name="passengerForm"、name="contactForm"）
• 给所有必填的输入字段加上required指令，让Angular知道这些字段必须填写
• 在提交按钮的ng-disabled里，检查所有表单的$valid状态——只要有一个表单无效，就禁用按钮

举个实际的代码例子：

<!-- 第一个表单 -->
<form novalidate name="passengerForm">
  <input type="text" ng-model="passenger.fullName" required placeholder="全名">
  <input type="email" ng-model="passenger.email" required placeholder="邮箱">
</form>

<!-- 第二个表单 -->
<form novalidate name="contactForm">
  <input type="text" ng-model="contact.phone" required placeholder="联系电话">
  <input type="text" ng-model="contact.address" required placeholder="联系地址">
</form>

<!-- 提交按钮 -->
<button ng-click="submitAllData()" ng-disabled="!passengerForm.$valid || !contactForm.$valid">提交所有信息</button>

这样只有当两个表单的所有必填项都填好时，按钮才会变成可点击状态。如果还有自定义验证需求（比如手机号格式），还可以用ng-pattern或者自己写个验证指令来扩展表单的有效性判断。

你遇到的问题多半是没把表单验证状态和按钮/点击事件绑定起来，虽然有些示例没用到ng-click，但结合ng-click的话，我们可以从两个层面解决：

第一招：直接禁用未填完时的按钮（从根源避免误点） #

给你的passengerForm里的必填字段加上required，然后给Proceed按钮绑定ng-disabled="!passengerForm.$valid"：

<form novalidate name="passengerForm">
  <div class="col">
    <input type="text" ng-model="data.firstName" required placeholder="First Name">
    <input type="text" ng-model="data.lastName" required placeholder="Last Name">
    <!-- 其他必填字段也加上required -->
  </div>
  <button ng-click="proceedToNext()" ng-disabled="!passengerForm.$valid">Proceed</button>
</form>

这样用户没填完所有必填项时，按钮是灰色不可点击的，自然不会触发报错的逻辑。

第二招：在ng-click的方法里加双重校验（兜底保障） #

如果因为业务场景不能禁用按钮，那一定要在controller的proceedToNext方法里先判断表单是否有效：

app.controller('YourFormController', function($scope) {
  $scope.data = {};
  
  $scope.proceedToNext = function() {
    // 先检查表单是否有效
    if (!$scope.passengerForm.$valid) {
      alert('请填写所有必填字段哦！');
      return; // 直接终止后续代码执行
    }
    
    // 表单没问题的话，再执行你原来的逻辑
    // 比如获取数据、调用接口等等
  };
});

还要提醒你一句：AngularJS的表单验证需要每个输入字段都正确绑定ng-model，不然表单的$valid状态不会更新，这也是很多人踩坑的地方！

内容的提问来源于stack exchange，提问作者Bikal Nepal