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

Posted 2021-04-14

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

Cannot read property '$valid' of undefined

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

的jsfiddle here

提前致谢

答案

将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 = {}我们已经初始化了空数据对象。所以在第二种情况下我们有至少空对象的引用，而在第一种情况下它没有任何引用。

Fiddle

另一答案

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 - 如果创建一个没有定义形式的子范围。

刚刚更改了ng-if到ng-show，表单停止未定义。

以上是关于无法读取未定义的属性'$ valid'的主要内容，如果未能解决你的问题，请参考以下文章

TypeError.无法读取未定义的'$__'属性。无法读取未定义的'$__'属性 - Mongoose v5.^。

Nativescript 5.3.1 TypeError：无法读取未定义的属性'getViewById'

无法读取未定义的属性'setRoot' - 角度错误

TypeError：无法读取未定义的属性'spacing'

无法读取未定义的'角度误差'属性'panTo'

jqgrid treeGrid无法读取未定义的属性'rowIndex'