AngularJS验证 - textarea上的ng-minlength

Question

我正在开发一个AngularJS大量用于前端的项目.这是我有的:

我想要的验证规则如下:

除非输入的原因至少为10个字符,否则Next应禁用该按钮.

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

码:

<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/