如何在AngularJS类控制器中添加$watch监听表单校验状态

你写的$watch监听代码需要放在TestController的constructor构造函数内，构造函数会在控制器初始化时执行，适合放置初始化监听类逻辑。

另外注意你当前使用的是controller as语法（模板中表单绑定路径为testCtrl.testForm），原监听表达式需要调整才能正确识别表单对象，可选两种调整方案：

• 方案1：监听路径加上模板中声明的控制器别名

  class TestController {
      constructor($scope, ...) {
          // 原有其他初始化逻辑...
          
          // 新增监听代码
          $scope.$watch('testCtrl.testForm.$invalid', function(isInvalid) {
              $scope.disableNextBtn = isInvalid;
          });
      }
  
      // 原有其他方法
      canSaveTest() {
          return this.testForm.$valid;
      }
  }
  

• 方案2：用函数返回监听值，避免硬编码控制器别名，可维护性更高

  class TestController {
      constructor($scope, ...) {
          // 原有其他初始化逻辑...
          const ctrl = this;
          
          // 新增监听代码
          $scope.$watch(function() {
              // 兼容表单初始化前的undefined状态
              return ctrl.testForm && ctrl.testForm.$invalid;
          }, function(isInvalid) {
              $scope.disableNextBtn = isInvalid;
          });
      }
  }
  

更简洁的无监听实现方案 #

你已经封装了canSaveTest方法，无需额外写$watch，直接在模板中绑定方法控制按钮禁用状态即可，AngularJS会自动跟踪依赖更新状态：

<!-- 示例提交按钮 -->
<button type="submit" ng-disabled="!testCtrl.canSaveTest()">提交</button>

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