Question

我有一个带有名称字段和两个验证的表单 - required和max-length。当我输入正确的值时，控制器中的表单显示有效并返回true。但是在输入错误的数据时，$ valid不会丢错，只是说 -

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

请参阅下面的演示，通过提交点击

将表单传递给控制器

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>

Answer 3

将$scope.data={};放在控制器的顶部： - ）

这种情况正在发生，因为您直接提交的表单尚未初始化数据对象，因此无法识别名称data.Name。

如果在这种情况下放置$ scope.data = {}，我们将初始化空数据对象。在第二种情况下，我们有至少空对象的引用，而在第一种情况下，它没有任何引用。< / p>

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

使用$ valid的格式应该是这样的。如果你不能再次访问，请访问AngularJs的官方网站。

Answer 5

我有类似的问题，但就我而言，我是ng-if，如果创建的子范围没有定义的形式。

只需将ng-if更改为ng-show，并且表单stop不确定。

无法读取未定义的属性'$ valid'

5 个答案: