title: Angular Validation based on selected option in DropDown
body: <p>I am working on a project that relies heavily on Angular for its front-end. I am still in the process of learning Angular, and have come across a complex scenario.</p>
  
  <p>Here is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/x2Lud.png" alt="Dropdown with options"></p>
  
  <p>The above is part of a wizard. Clicking <code>Next</code> moves the user along the wizard. So far so good. I do not want the user to be able to click <code>Next</code> unless they select an option from the drop down.</p>
  
  <p>If they select the <code>Payment Taken</code> option, I would like them to be able to move along the wizard, but instead what is currently happening is this:</p>
  
  <p><img src="https://i.stack.imgur.com/qKPBx.png" alt="Payment Taken option selected in Drop Down"></p>
  
  <p>As you can see, the <code>Next</code> button is disabled when I want it to be enabled.</p>
  
  <p>Moving on .. if <code>Payment Deferred</code> is selected, I would like the user to input a reason for why the payment was deferred .. also this reason must be over 10 characters long, if that rule is satisfied, then the <code>Next</code> button should be enabled.</p>
  
  <p><img src="https://i.stack.imgur.com/en1zm.png" alt="Payment Deferred option selected"></p>
  
  <p>The above seems to work fine!</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;form name="paymentForm"&gt;
      &lt;div class="form-group" id="Div2"&gt;
          &lt;select ng-model="selectedPaymentStatus" ng-options="ps.name for ps in paymentStatus" required&gt;&lt;/select&gt;
      &lt;/div&gt;&lt;!-- .form_group --&gt;
  
      &lt;div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3"&gt;
          &lt;p&gt;Reason&lt;/p&gt;
          &lt;textarea class="form-control" ng-disabled="selectedPaymentStatus.value === 'paymentTaken'" required ng-model="crate.paymentDeferredReason" ng-minlength="10"&gt;&lt;/textarea&gt;
      &lt;/div&gt;&lt;!-- .form_group --&gt;
  &lt;/form&gt;
  
  &lt;button class="btn wizard-next-btn pull-right" ng-disabled="!paymentForm.$valid" ng-click="nextStep()"&gt;Next&lt;/button&gt;
  &lt;button class="btn wizard-back-btn" ng-click="previousStep()"&gt;Back&lt;/button&gt;
  </code></pre>
  
  <p><strong>WHAT I THINK:</strong></p>
  
  <p>I think the reason it is not behaving as expected when I select <code>Payment Taken</code> in the drop down is because I have told my markup that the hidden <code>Reason</code> textarea is also required.</p>
  
  <p>To get over this, I made my <code>Reason</code> text area disabled when the user selects <code>Payment Deferred</code>.</p>
  
  <pre><code>ng-disabled="selectedPaymentStatus.value === 'paymentTaken'"
  </code></pre>
  
  <p>But this apparently does not override the validation rules set on that DOM element (the textarea); that, or I'm doing something wrong.</p>