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

我使用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>

字段中的引导加载项应始终计数剩余字符。只要表单无效，就应禁用“提交”按钮

按钮的工作方式与aspected相同，但加载项中的“倒计时”始终为18

为什么?

---

见此。

如果输入了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>

或

{{inputMaxLength input.length}

（同样适用于

ng minlength=“{{inputMaxLength}}”ng maxlength=“{{inputMaxLength}}”

，此处无需插值，请改用

ng minlength=“inputMaxLength”ng maxlength=“inputMaxLength”

）

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

myForm.input.$viewValue

---

我已经更新了you fiddle

这无法工作：您的ng验证（ng minlength）将$scope.input设置为null。所以你的计数器不能工作

此外，你还写道：

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

当angular工作时，他将用值替换变量。你应该写：

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

---

我没有

inputMinLength

。长度必须正好是18，因此这在最小值和最大值上都使用。我明白了，然后你来到我答案的第二部分，你无法使用ng-model获得无效模型的长度。那么你试图做的是不可能的

ng minlength

的工作原理如下：如果值有效，则更新

ng model

。如果没有，就让它去吧。因此，即使您

$watch

该模型在字段中有18个字符之前不会被更新。您可以使用myForm.input.$viewValue来代替它，它将为您提供输入，无论上面的答案是什么

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

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