Cannot read property '$valid' of undefined

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

5 Answers
5

Add ng-submit attribute to the form:

ng-submit

<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

ng-click

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.

$log

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>

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

$scope.data=;

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

HTML:

<form name="form" id='form' novalidate>
<input type="text"required name="Title" ng-model="Title">
<div ng-messages="form.Title.$error">
<div ng-message="required">Field Required</div>
</div>
</form>


JS:

$scope.save= function(){
if (!scope.createMessage.$valid)
scope.form.$submitted = true;
return;



The format for using $valid should be like this. If you don't get again then visit the official site of AngularJs.

I had similar problem, but in my case I was a ng-if creating a child scope that did not have the form defined.

Just changed the ng-if to ng-show and the form stop be undefined.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.