未满足 ng-maxlength 要求时未定义字段答案

【问题标题】：Field is undefined when fails to meet ng-maxlength requirement未满足 ng-maxlength 要求时未定义字段
【发布时间】：2018-08-05 22:37:40
【问题描述】：

我是 AngularJs/Web 的新手，似乎它应该是基本的东西，但我很难找到解决这个问题的方法......

我有一个 ModalWindow，用户可以在其中输入评论。如果此 cmets 超过 X 个字符，则应阻止保存（+一些错误消息）。所以我认为ng-maxlength 指令应该可以解决问题，但它的行为很奇怪。

当长度要求通过时，$scope.fieldName 包含数据（这是预期的），但如果用户输入的字符数超过允许的字符 - 那么 $scope.fieldName 为 undefined 并尝试访问字段的 $error字段抛出异常。

根据我在本案例中看到的情况，应该设置字段的 $error.maxlength...

那么对于如何解决这个问题有什么想法和建议吗？

//在视图中

    <div class="display-field notator-holder">
        <textarea class="notator"
                  cols="20"
                  id="something"
                  name="fieldName"
                  ng-model="fieldName"
                  ng-maxlength="14"
                  rows="5" hidden>
        </textarea>
    </div>

//...在控制器中

$scope.saveChanges = function () {
    if ($scope.fieldName.$error.maxlength) 
    ...
}

【问题讨论】：

标签： html angularjs validation

【解决方案1】：

它的行为符合预期。您缺少的是，您需要从表单访问表单项。当什么都没有时，模型值默认为无，即。当验证出现错误时。

这是一个例子。

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

app.controller('ctrl', function($scope) {
});

<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <div ng-app="app" ng-controller="ctrl">
  <form name="meForm">
    <textarea class="notator" cols="20" id="something" name="textArea" ng-model="fieldName" ng-maxlength="14" rows="5">
    </textarea>
    <p ng-show="meForm.textArea.$error.maxlength">Oi! Too long matey!</p>
    <p>Value = {{fieldName ? fieldName : "Invalid/Nothing"}}</p>
    <p>{{meForm.textArea}}</p>
  </form>
</div>

【讨论】：

不错！这是有效的，但只是一个简单的问题 - 这个 html 用于在 modalwindow 中显示输入数据，在这种情况下使用表单标签是 ok 吗？
我想不出理由。如果您的模态是自包含的，则包装表单。

【解决方案2】：

尝试仅使用 maxlength 而不是 ng-maxlength，这将限制用户输入超过给定限制的内容，如 plunker 所示。

模板：

<textarea class="notator" cols="20" id="something" name="textArea" 
      ng-model="fieldName" maxlength="14" rows="5"></textarea>
<p ng-show="meForm.textArea.$error.maxlength">Oi! Too long matey!</p>
<p>Value = {{fieldName ? fieldName : "Invalid/Nothing"}}</p>
<p>{{meForm.textArea}}</p>

【讨论】：