Невозможно прочитать свойство '$ invalid' of undefined

Question

Я создаю страницу статистики с помощью углового.

Когда я отправляю форму, она выдает ошибку. Невозможно прочитать свойство «$ invalid» undefined.

Вот 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(); 
}]); 

Кто-нибудь знает, почему я получаю сообщение об ошибке?

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