Toggle class on input depending on input's value

Question

I am still new to Angular but I have an existing application that uses Angular 1.5 pretty heavily.

I have a basic form that I need to add a class to depending on the following criteria:

The form can only have an End Date value or an Active for value. It cannot have both. I was thinking I need to disable the input box of the input not being used.

Ex. If a user inputs a date into the End Date input, then the Active for input will become disabled.

I looked into ng-if but every example I came across was for checking if the entered input variable was empty or equal to a value in a .js controller, not checking if the current entered variable was equal to another entered variable in the form.

<div class="form-group">
    <label>End date:</label>
    <div class="input-group">
        <input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
</div>
<div class="form-group">
    <label>Or will be active for:</label>
    <input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>

Here is a screenshot of my modal where this happens. Ignore the other inputs as they are not affected by the conditions I've laid out.

Thanks

Form Screen Shot

Kyle · Accepted Answer · 2016-05-02 15:45:23Z

1

You can use ng-disabled.

//initialize your dates with null
$scope.updatePatientLabel = {};
$scope.updatePatientLabel.active_end_date = null;
$scope.updatePatientLabel.expiration_time_number = null;

HTML:

<input id="endDate" ng-disabled="updatePatientLabel.expiration_time_number !== null" ng-model="updatePatientLabel.active_end_date" />

<input id="activeDate" ng-disabled="updatePatientLabel.active_end_date !== null" ng-model="updatePatientLabel.expiration_time_number" />

answered May 2, 2016 at 15:45

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

1 Comment

Nova Development Over a year ago

Worked perfectly. Thank you so much!

Nate I · Accepted Answer · 2016-05-02 15:43:09Z

You have a few options. Classes, as you mentioned, or ng-if. The ng-if seems more elegant, like so:

<div class="form-group" ng-if="updatePatientLabel.active_end_date != ''">
    <label>End date:</label>
    <div class="input-group">
        <input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
</div>
<div class="form-group" ng-if="updatePatientLabel.expiration_time_number > 0">
    <label>Or will be active for:</label>
    <input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>

Otherwise, you could do an inline conditional outputting "hidden" inside the class attribute only if the value is not present. Something like this:

<div class="form-group {{updatePatientLabel.active_end_date != '' ? '' : 'hidden'}}">
    <label>End date:</label>
    <div class="input-group">
        <input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
</div>
<div class="form-group {{updatePatientLabel.expiration_time_number > 0 ? '' : 'hidden'}}">
    <label>Or will be active for:</label>
    <input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>

I use both in my projects, and either way is perfectly acceptable. Though, ng-if does seem more elegant and a bit more suited for this scenario.

Collectives™ on Stack Overflow

Toggle class on input depending on input's value

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