Cannot read property '$invalid' of undefined

Question

I am creating a statistics page using angular.

When I submit the form it throws the error Cannot read property '$invalid' of undefined.

Here is the 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>

And here is the js code :

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

Does anyone know why I am getting an error ?

score 1 · Accepted Answer · edited May 23 '17 at 12:25

Because your form is undefined inside your controller. You have to create a reference to the form in your controller.

This could be accomplished either by using controllerAs syntax:

e.g.

In the view:

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

Controller:

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

Or if you wish to inject $scope in the controller, then the answer of how to access your form can be found here.

Here's a working plunker.

Cannot read property '$invalid' of undefined

1 Answers1