角度验证基于DropDown中的选定选项

Question

我正在开发一个严重依赖Angular前端的项目。我仍然在学习Angular，并遇到了一个复杂的场景。

这就是我所拥有的：

以上是向导的一部分。单击Next可沿向导移动用户。到现在为止还挺好。我不希望用户能够点击Next，除非他们从下拉菜单中选择一个选项。

如果他们选择Payment Taken选项，我希望他们能够沿着向导移动，但目前正在发生的是：

如您所见，当我希望启用Next按钮时，{}禁用该按钮。

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

以上似乎工作正常！

CODE：

<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也是必需的。

为了克服这个问题，我在用户选择Reason时禁用了Payment Deferred文字区域。

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

但这显然不会覆盖在该DOM元素（textarea）上设置的验证规则;那，或者我做错了什么。

Answer 1

ng-show应用display: none CSS规则（ref），但内容的功能仍然存在。在您的情况下，<textarea>仍然是必需的，尽管隐藏了阻止。

另一方面，

ng-if完全从DOM 和 Angular的层次结构中删除其内容。已移除的ng-model控制器将不参与验证，这是您想要的：

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

Answer 2

这可能对您有帮助

<ng-container *ngIf="selectedPaymentStatus.value === 'paymentDeferred;">
   <div>
      <textarea> Some Text Goes Here </textarea>
   </div>
</ng-container>