Cannot read property '$valid' of undefined

Question

I have a form with a name field and two validations - required and max-length. When I enter correct value, the form in controller is showing valid and returning true. But on entering wrong data, $valid is not throwing false and simply says -

Cannot read property '$valid' of undefined

Why is the form getting undefined in this case?

Jsfiddle here

Thanks in advance

Answer 1

Add ng-submit attribute to the form:

<form name="myForm" ng-submit="SaveAndNext()" novalidate>

Change controller to:

function myCtrl($scope, $log){
    $scope.data = {};
    $scope.SaveAndNext = function(){
        if($scope.myForm.$valid){
            $log.info('Form is valid');
            $log.info($scope.data);
        } else {
            $log.error('Form is not valid');
        }
   }
}

Remove ng-click event handler from your submit button

Updated fiddle: http://jsfiddle.net/9cgopo7d/1/

I included the $log service because it's a useful default service and you might not know about it.

Answer 2

See demo below pass your form to controller with the submit click

ng-click="SaveAndNext(myForm)"

and now you can easy access all your form properties

function myCtrl($scope) {

  $scope.SaveAndNext = function(form) {
    console.log(form);
    if (form.$valid) {
      alert(form.$valid);
    } else {
      alert("!" + form.$valid)
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="registrationdetails" ng-app="" ng-controller="myCtrl">
  <form name="myForm" novalidate>
    <div class="list">
      <div class="item list-item">
        <div class="row row-center">
          <div class="col-50">	<span class="form-field-name">Name</span>

          </div>
          <div class="col-50">
            <textarea type="text" rows="5" ng-model="data.Name" name="Name" ng-maxlength=45 required></textarea>	<span ng-show="myForm.Name.$dirty && myForm.Name.$invalid">
                                        <span class="form-error" ng-show="myForm.Name.$error.required">Name is required</span>
            <span class="form-error" ng-show="myForm.Name.$error.maxlength">Name should be max 45 characters</span>
            </span>
          </div>
        </div>
      </div>
      <div class="item list-item">
        <div class="row row-center">
          <div class="col-50">	<span class="form-field-name">Type</span>

          </div>
          <div class="col-50">
            <select ng-class="{defaultoption: !data.Type}" ng-model="data.Type" name="Type" required>
              <option value="" disabled selected class="defaultoption">Type</option>
              <option value="1" class="actualoption">Type 1</option>
              <option value="2" class="actualoption">Type 2</option>
            </select>
            <span ng-show="myForm.Type.$dirty && myForm.Type.$invalid">
                                        <span class="form-error" ng-show="myForm.Type.$error.required">Type is required</span>
            </span>
          </div>
        </div>
      </div>
      <div class="item list-item">
        <div class="row">
          <div class="col">
            <input type="submit" class="button" ng-click="SaveAndNext(myForm)" value="Next">
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 3

Place $scope.data={}; at the top of controller:-)

This is happening becuase you are directly submit the form which doesn't yet initialized the data object and therefore name data.Name is not recognized.

And if you place $scope.data={} in that case we have empty data object initialized.So in second case we have atleast reference of empty object whereas in first case it doesn't have any reference.

Fiddle