AngularJS验证 - textarea上的ng-minlength

Question

我正在开发一个AngularJS大量用于前端的项目。这就是我所拥有的：

我想要的验证规则如下：

Next按钮应禁用，除非输入的原因至少10个字符。

此外，我希望能够告诉用户在他/她能够提交之前剩下多少个字符。这将出现在textarea的右下角。

CODE：

<form name="paymentForm">
    <div class="form-group" id="Div2">
        <select ng-model="selectedPaymentStatus" ng-options="ps.name for ps in paymentStatus"></select>
    </div><!-- .form_group -->

    <div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3">
        <p>Reason</p>
        <textarea class="form-control" ng-model="crate.paymentDeferredReason" ng-minlength="10"></textarea>
    </div><!-- .form_group -->
</form>

<button class="btn wizard-next-btn pull-right" ng-disabled="paymentForm.$valid" ng-click="nextStep()">Next</button>
<button class="btn wizard-back-btn" ng-click="previousStep()">Back</button>

出于某种原因，上述代码无效！即使我输入单个字符，下一个按钮也会启用！

Answer 1

您需要进行两次更正：

1. ng-disabled="paymentForm.$valid"实际应该是ng-disabled="paymentForm.$invalid"
2. 将ng-required="true"添加到<textarea>;否则ng-minlength似乎不会对空字段生效。

此外，窗体外的按钮似乎工作正常，但我建议不要这样做;我觉得它在所有情况下都不起作用（但现在无法证明：）

相关小提琴：http://jsfiddle.net/J2JA6/