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

Question

我有一个带有名称字段和两个验证的表单 - 必填和最大长度。当我输入正确的值时，控制器中的表单显示有效并返回 true。但是在输入错误的数据时，$valid 并没有抛出错误，只是说 -

Cannot read property '$valid' of undefined

为什么在这种情况下表单变得未定义？

Jsfiddle here

提前致谢

Answer 1

将$scope.data={};放在控制器顶部:-)

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

如果你放置 $scope.data={} 在这种情况下我们有空数据对象 initialized.So 在第二种情况下我们至少有空对象的引用而在第一种情况下它没有任何参考。

Fiddle

Answer 2

向表单添加 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 事件处理程序

已更新 fiddle：http://jsfiddle.net/9cgopo7d/1/

我包含了 $log 服务，因为它是一项有用的默认服务，您可能不知道。

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"> <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 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 并且表单停止未定义。

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

Cannot read property '$valid' of undefined

angularjs

angularjs-scope

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