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

Question

У меня есть форма с полем имени и двумя проверками - требуемая и максимальная длина. Когда я ввожу правильное значение, форма в контроллере показывает действительную и возвращает true. Но при входе в неправильные данные, $ действует не бросать ложные и просто говорит -

Cannot read property '$valid' of undefined 

Почему форма получения неопределенными в этом случае?

Jsfiddle here

Заранее спасибо

Answer 1

Добавить ng-submit атрибут в виде:

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

Изменить контроллер для:

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'); 
     } 
    } 
} 

Удалить ng-click обработчик события из кнопки отправки

Изменено скрипку: http://jsfiddle.net/9cgopo7d/1/

Я включил службу $log, потому что это полезная служба по умолчанию, и вы можете не знать об этом.

Answer 2

Место $scope.data={}; в верхней части контроллера :-)

Это происходит, потому что вы непосредственно представить форму, которая еще не инициализирован объект данных и, следовательно, имя data.Name не распознается.

И если вы поместите $ scope.data = {}, в этом случае у нас есть пустой объект данных, инициализированный. Таким образом, во втором случае у нас есть ссылка на пустой объект, тогда как в первом случае у него нет ссылки.

Fiddle

Answer 3

Смотрите демо ниже передать свою форму в контроллер с представить нажмите

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"> \t <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> \t <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"> \t <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 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; 
} 

Формат использования $ действительный должно быть. Если вы не получите еще раз, посетите официальный сайт AngularJs.