无法读取未定义的属性“$invalid”答案

【问题标题】：Cannot read property '$invalid' of undefined无法读取未定义的属性“$invalid”
【发布时间】：2017-06-17 23:33:26
【问题描述】：

我正在使用 Angular 创建一个统计页面。

当我提交表单时，它会抛出错误无法读取未定义的属性“$invalid”。

这里是html：

<form name="statsForm" ng-submit="quoteRequestsKpi()" novalidate>
  <div class="row">

    <div class="col-lg-5">
      <div class="form-group" show-errors="{ showSuccess: true }">
        <label for="month">Month</label>
        <select name="month" id="month" class="form-control" required="required" ng-model="statsIn.month">
          <option value="0">January</option>
          <option value="1">February</option>
          ...
        </select>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="form-group" show-errors="{ showSuccess: true }">
        <label for="year">Year</label>
        <select name="year" id="year" class="form-control" required="required" ng-model="statsIn.year">
          <option value="2016">2016</option>
          <option value="2017">2017</option>
        </select>
      </div>
    </div>

    <div class="col-lg-2">
      <div class="form-group">
        <label>&nbsp;</label>
        <input type="submit" class="btn btn-primary form-control" value="go" />
      </div>
    </div>

这里是js代码：

controllers.controller('StatsController', [
'$scope', 'growl', 'appService',
function($scope, growl, appService) {
    var logger = log4javascript.getLogger('Stats');

    logger.debug('StatsController');

    /**
     */
    $scope.statsIn = {
        month : null,
        year : '2017'
    };

    /**
     */
    $scope.$on(EVENT_CURRENT_USER_SUCCESS, function() {
        logger.debug(EVENT_CURRENT_USER_SUCCESS);

        $scope.init();
    });

    /**
     */
    $scope.quoteRequestsKpi = function() {
        logger.debug('quoteRequestsKpi');

        $scope.$broadcast('show-errors-check-validity');

        if ($scope.statsForm.$invalid) {
            return;
        }

        appService.quoteRequestsKpi($scope.kpiIn).then(function(data) {
            if (data.status == SUCCESS) {

                $scope.quoteRequestKpis = data.quoteRequestKpis;
            } else {
                logger.warn('quoteRequestsKpi: ' + JSON.stringify(data));
            }
        });
    }

    $scope.ensureUserIsAuthenticated();
}]);

有人知道我为什么会出错吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

因为您的表单在控制器中未定义。您必须在控制器中创建对表单的引用。

这可以通过使用controllerAs 语法来完成：

例如

在视图中：

 <div ng-controller="StatsController as vm">
  <form name="vm.statsForm">
   <!--Input Fields...-->
  </form>
</div>

控制器：

    var vm = this;
    vm.statsForm// This is a reference to your form.

或者如果你想在控制器中注入$scope，那么如何访问你的表单的答案可以在here找到。

这是一个有效的plunker。

【讨论】：