绑定不适用于所需的输入字段答案

【问题标题】：bind not working for required input field绑定不适用于所需的输入字段
【发布时间】：2015-03-05 10:39:04
【问题描述】：

我有这个使用 Bootstrap 的 AngularJS HTML：

<div class="col-sm-6" ng-app ng-controller="MyController">   
    <br/><br/>
    <form name="myForm">
        <div class="input-group">
            <input type="text" name="input" class="form-control" ng-model="input" maxlength="{{inputMaxLength}}" ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}" placeholder="Type input.." aria-describedby="basic-addon2" required />
            <span class="input-group-addon" id="basic-addon2" ng-bind="{{inputMaxLength-input.length}}"></span>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-primary" ng-disabled="myForm.$invalid">Submit</button>
        </div>
    </form>
</div>

还有这个控制器：

function MyController($scope) {
    $scope.input = "";
    $scope.inputMaxLength = 18;
}

该字段中的 Bootstrap 插件应始终计算剩余字符。只要表单无效，就应该禁用提交按钮。

按钮按方面工作，但插件中的“倒计时”始终为 18。

为什么？

看到这个JSFiddle。

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

你在 ng-min-length 中有错字，你应该有：

ng-minlength="{{inputMinLength}}"

而不是

ng-minlength="{{inputMaxLength}}"

哦，你应该去掉 ng-bind 上的花括号，你可以使用其中的一个，但不能同时使用所以要么：

<span class="input-group-addon" id="basic-addon2" ng-bind="inputMaxLength-input.length"></span>

或

<span class="input-group-addon" id="basic-addon2">{{inputMaxLength-input.length}}</span>

（同样适用于ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}"，此处无需插值，改用ng-minlength="inputMaxLength" ng-maxlength="inputMaxLength"）

请注意，虽然输入不满足要求，即。大于 minLength 且小于 maxLength 输入将没有值。在这种情况下，您可以使用 myForm.input.$viewValue

获取值

我已经更新了你的小提琴http://jsfiddle.net/29m5tdsc/9/

【讨论】：

我没有inputMinLength。长度必须正好是 18，因此它同时用于最小值和最大值。
我明白了，那么你来到我回答的第二部分，你无法使用 ng-model 获得无效模型的长度。
那么您尝试做的事情是不可能的。 ng-minlength 的工作方式如下：如果值有效，则更新 ng-model。如果没有，请不要这样做。因此，即使您 $watch 模型，它也不会更新，直到字段中有 18 个字符。
你可以使用 myForm.input.$viewValue 代替，无论如何都会给你输入
用一个工作小提琴编辑了上面的答案

【解决方案2】：

这不起作用：您的 ng-validation (ng-minlength) 会将 $scope.input 设置为 null。所以你的柜台不会工作。

另外，你写道：

ng-bind="{{inputMaxLength - input.length}}"

当角度起作用时，他将用值替换变量。你应该写：

ng-bind="(inputMaxLength - input.length)"

JS Fiddle

【讨论】：