Angular Validation based on selected option in DropDown

Question

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.

Here is what I have:

Dropdown with options

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:

Payment Taken option selected in Drop Down

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.

Payment Deferred option selected

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.

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
– Nikos Paraskevopoulos, Commented Jun 24, 2014 at 8:59

Nikos Paraskevopoulos · Accepted Answer · 2014-06-24 09:54:21Z

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

answered Jun 24, 2014 at 9:54

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J86 Over a year ago

Brilliant, thanks Nikos, you know a lot about Angular :)

Basil · Accepted Answer · 2019-12-02 07:18:07Z

0

This may help you

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

answered Dec 2, 2019 at 7:18

Basil

1,92318 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular Validation based on selected option in DropDown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related