Question

在我的角度控制器中，我尝试验证用户是否插入了5个字符，如果少于5个字符，则应显示警告。我的控制器：

var app = angular.module('myapp', ['ui.bootstrap']);
app.controller('FeedController', function ($scope, $http) {


    $scope.customPostText = "";
    $scope.sendMessage = function()
    {
        console.log("text ");
        console.log($scope.customPostText);
        var length = $scope.customPostText.length
        //could us:
        //if ($scope.postcommentForm.customPostText.$valid) instead to check if valid
        //but I want to see the length.
        if(length >4 && length < 255)
        {
                    alert("not undefined");
        }
        else
        {
            alert("message needs 5 characters you have."+length);
        }
    }
});

出于某种原因，如果我输入少于5个字符，则scope.customPostText变为未定义，并且日志中会出现错误：

无法读取未定义的属性“长度”

然而，对于5个字符或更多字符没有问题，我发现它是因为我在我的html中使用ng-minlength：

<div ng-controller="FeedController">
    <div class="row">
      <form id="postcommentForm" name="postcommentForm">
        <div class="form-group">
          <div class="input-group" id="post-comment-textarea">
            <textarea class="form-control"  name="customPostText"  id="customPostText" maxlength="255"
                      ng-model="customPostText"
                      ng-minlength="5"  
                      ng-maxlength="255" 
                      ng-trim="true"
                      ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }"   
                      ng-required="true"                              
                      ></textarea>
            <span class="input-group-addon  btn btn-success" 
                  ng-disabled="{{postcommentForm.customPostText.$valid == false}}" 
                  ng-click="sendMessage()"
                  ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }"   >
              Send
            </span>

          </div>
        </div>
      </form>
  </div>
</div>

Fiddle

但是我需要ng-minlength用于ng-class中使用的验证：

ng-class="{ 'success-border': postcommentForm.customPostText.$valid ,'error-border': !postcommentForm.customPostText.$valid }"

如何使用ng-minlength而不会出现未定义值的问题？

Answer 1

最小长度验证可防止内容无效时发送。因此，你只能得到未定义。

处理此问题的一种方法是：

var length = angular.isDefined($scope.customPostText) ? $scope.customPostText.length : 0

这样，只要输入字段中没有写入有效输入，就会得到0。

Answer 2

是的，问题是由于您使用的ng-minlength，只有当它超过最小长度时才会将值分配给ng-model。我不认为你可以改变这种行为

不理想，但制作移位解决方案是移除最小长度，你可以做的是在控制器中制作一个转换器类型

if(length >4 && length < 255)
    {
         $scope.length_valid = true; 
         alert("not undefined");
    }
    else
    {
         $scope.length_valid = false; 
         alert("message needs 5 characters.");
    }

然后在html中

ng-class="{ 'success-border': postcommentForm.customPostText.$valid && length_valid ,'error-border': !postcommentForm.customPostText.$valid || !length_valid }"

Answer 3

在您的js中为您的变量指定表单名称： $ scope.postcommentForm.customPostText

它永远不会给你未定义。

{{1}}

}）;

使用ng-minlength验证时，角度属性未定义

3 个答案: