Unable to read property "$ valid" from undefined

Question

I have a form with a name field and two checks - the required and maximum length. When I enter the correct value, the form in the controller shows the valid and returns true. But when entering invalid data, the value $ valid does not throw false and just says -

Cannot read property '$valid' of undefined

Why does the form get undefined in this case?

Jsfiddle here

Thanks in advance

Answer 1

Add an attribute ng-submitto 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 the event handler ng-clickfrom your submit button

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

$log, , .

Answer 2

. , , submit

ng-click="SaveAndNext(myForm)"

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>

Hide result

Answer 3

$scope.data={}; : -)

- , , , , , data.Name .

And if you put $ scope.data = {}, in this case we have an empty data object initialized. Thus, in the second case, we have the smallest reference to an empty object, while in the first case it does not have a link.

Fiddle

Answer 4

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 do not receive again, visit the official AngularJs website.