0

在我的角度控制器中，我尝试验证用户是否插入了 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>

小提琴

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

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

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

4

3 回答 3

0

是的，问题是由于您使用的 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 }"
于 2017-05-10T11:12:20.907 回答
0

用这样的表单名称分配您的变量：$scope.postcommentForm.customPostText在您的 js

它永远不会给你不确定的。

var app = angular.module('myapp', ['ui.bootstrap']);


app.controller('FeedController', function ($scope, $http) {


$scope.customPostText = "";
$scope.sendMessage = function()
{
    console.log("text ");
    console.log($scope.postcommentForm.customPostText);
    var length = $scope.postcommentForm.customPostText.length
    if(length >4 && length < 255)
    {
                alert("not undefined");
    }
    else
    {
        alert("Bericht moet minimaal 5 karakters bevatten.");
    }
}

});

于 2017-05-10T11:12:54.717 回答
0

最小长度验证防止内容在无效时被发送。因此，您只会得到未定义。

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

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

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

于 2017-05-10T11:05:20.580 回答