У меня есть форма с полем имени и двумя проверками - обязательной и максимальной длины. Когда я ввожу правильное значение, форма в контроллере отображается как действительная и возвращает true. Но при вводе неверных данных $valid не выдает false, а просто говорит -
Cannot read property '$valid' of undefined
Почему в этом случае форма становится неопределенной?
Jsfiddle здесь
заранее спасибо
Добавьте в форму атрибут 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, потому что это полезная служба по умолчанию, и вы можете о ней не знать.
См. демонстрацию ниже, передайте вашу форму контроллеру с помощью кнопки отправки.
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>Поместите $scope.data={}; в верхнюю часть контроллера :-)
Это происходит потому, что вы напрямую отправляете форму, которая еще не инициализировала объект данных, и поэтому имя data.Name не распознается.
И если вы поместите $scope.data={} в этом случае, у нас будет инициализирован пустой объект данных. Таким образом, во втором случае у нас есть хотя бы ссылка на пустой объект, тогда как в первом случае у него нет никакой ссылки.
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;
}
Формат использования $valid должен быть таким. Если вы не получите снова, посетите официальный сайт AngularJs.
У меня была аналогичная проблема, но в моем случае я был ng-if, создавая дочернюю область, в которой не была определена форма.
Просто изменил ng-if на ng-show, и форма перестала быть неопределенной.
