javascript - 基于下拉列表中所选选项的 Angular 验证

Question

我正在从事一个前端严重依赖 Angular 的项目。我还在学习 Angular 的过程中，遇到了一个复杂的场景。

这是我的:

以上是向导的一部分。单击 Next 使用户沿着向导移动。到目前为止，一切都很好。我不希望用户能够单击 Next，除非他们从下拉列表中选择一个选项。

如果他们选择 Payment Taken 选项，我希望他们能够按照向导进行操作，但当前发生的情况是这样的:

如您所见，当我希望启用 Next 按钮时，它被禁用了。

继续......如果选择Payment Deferred，我希望用户输入延迟付款的原因......如果该规则，这个原因必须超过 10 个字符长满足，则应启用 Next 按钮。

以上似乎工作正常!

代码:

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

    <div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3">
        <p>Reason</p>
        <textarea class="form-control" ng-disabled="selectedPaymentStatus.value === 'paymentTaken'" required 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>

我的想法:

我认为当我在下拉列表中选择 Payment Taken 时它没有按预期运行的原因是因为我已经告诉我的标记隐藏的 Reason textarea 也是需要。

为了解决这个问题，我在用户选择 Payment Deferred 时禁用了我的 Reason 文本区域。

ng-disabled="selectedPaymentStatus.value === 'paymentTaken'"

但这显然不会覆盖在该 DOM 元素(文本区域)上设置的验证规则；那个，或者我做错了什么。

Answer 1

ng-show适用 display: none CSS 规则 ( ref )，但内容的功能仍然存在。在你的例子中，<textarea>仍然需要，尽管 block 被隐藏。

ng-if另一方面，从 DOM 和 Angular 的层次结构中完全删除它的内容。删除的 ng-model Controller 将不参与验证，这正是您想要的:

<div ng-if="selectedPaymentStatus.value === 'paymentDeferred'" ...>
    <textarea ...>
</div>