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 e across a plex scenario.

Here is what I have:

The above is part of a wizard. Clicking Next moves the user along the wizard. So far so good. I do not want the user to be able to click Next unless they select an option from the drop down.

If they select the Payment Taken option, I would like them to be able to move along the wizard, but instead what is currently happening is this:

As you can see, the Next button is disabled when I want it to be enabled.

Moving on .. if Payment Deferred 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 Next button should be enabled.

The above seems to work fine!

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>

WHAT I THINK:

I think the reason it is not behaving as expected when I select Payment Taken in the drop down is because I have told my markup that the hidden Reason textarea is also required.

To get over this, I made my Reason text area disabled when the user selects Payment Deferred.

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

But this apparently does not override the validation rules set on that DOM element (the textarea); that, or I'm doing something wrong.

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 e across a plex scenario.

Here is what I have:

The above is part of a wizard. Clicking Next moves the user along the wizard. So far so good. I do not want the user to be able to click Next unless they select an option from the drop down.

If they select the Payment Taken option, I would like them to be able to move along the wizard, but instead what is currently happening is this:

As you can see, the Next button is disabled when I want it to be enabled.

Moving on .. if Payment Deferred 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 Next button should be enabled.

The above seems to work fine!

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>

WHAT I THINK:

I think the reason it is not behaving as expected when I select Payment Taken in the drop down is because I have told my markup that the hidden Reason textarea is also required.

To get over this, I made my Reason text area disabled when the user selects Payment Deferred.

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

But this apparently does not override the validation rules set on that DOM element (the textarea); that, or I'm doing something wrong.

• javascript
• angularjs
• validation
• drop-down-menu

Share Improve this question Follow edited Aug 4, 2018 at 20:48 halfer 20.3k1919 gold badges109109 silver badges202202 bronze badges asked Jun 24, 2014 at 7:56 J86J86 15.3k5050 gold badges145145 silver badges249249 bronze badges 1

• 1 As a quick idea, can you replace ng-show with ng-if (Angular >= 1.2)? ng-if removes the element and, hopefully, may also retract the validation failure. – Nikos Paraskevopoulos Commented Jun 24, 2014 at 8:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

ng-show applies the display: none CSS rule (ref), but the functionality of the content is still present. In your case, the <textarea> remains required, despite the block being hidden.

ng-if on the other hand pletely removes its content from the DOM and Angular's hierarchy. The removed ng-model controller will not take part in validation, which is what you want:

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

This may help you

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