Set the class of an element dynamically using ng-class and detect changes with ng-change

Question

Set the class of an element dynamically using ng-class and detect changes with ng-change

I want the input field to initially have the class .form-control-error. When the user clicks on the field and starts typing, I would like it to change to .form-control-success.

I attempted the following code but couldn't get it to update. The ng-change is working as expected, so it seems to be an issue with updating the css.

CSS:

// ... more classes
.form-control-error:focus {
    border-color: #FF0000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}  
.form-control-success:focus {
    border-color: #5cb85c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

JS:

$scope.changeEmail = function () {
    console.log('change');

    $scope.formControlColor = function () {
        return 'form-control-success';
    };
};

HTML:

<input type="text" id="email" ng-model="email" ng-change="changeEmail()" placeholder="email" ng-class="{'form-control-error': !formControlColor()}" class="form-control input-lg margin-bottom-15">

javascript css angularjs

Answer 1

Answer №1

formControlColor is a function that will provide the necessary class. If you wish to use this return value in ng-class, simply call the function.

<input ... ng-class="formControlColor()" ... />

To ensure the function has an initial definition and displays the correct class when the page loads, your JavaScript code should be similar to:

$scope.formControlColor = function(){
    return 'form-control-error';
};
$scope.changeEmail = function () {
    console.log('change');

    $scope.formControlColor = function () {
        return 'form-control-success';
    };
};

If the value remains constant and doesn't require any complex computation, you can eliminate the function and directly use a string instead. In that case, it would look like:

HTML

<input ... ng-class="formControlClass" ... />

JavaScript

$scope.formControlClass = 'form-control-error';

$scope.changeEmail = function() {
    $scope.formControlClass = 'form-control-success';
}

Answer 2

formControlColor is a function that will provide the necessary class. If you wish to use this return value in ng-class, simply call the function.

<input ... ng-class="formControlColor()" ... />

To ensure the function has an initial definition and displays the correct class when the page loads, your JavaScript code should be similar to:

$scope.formControlColor = function(){
    return 'form-control-error';
};
$scope.changeEmail = function () {
    console.log('change');

    $scope.formControlColor = function () {
        return 'form-control-success';
    };
};

If the value remains constant and doesn't require any complex computation, you can eliminate the function and directly use a string instead. In that case, it would look like:

HTML

<input ... ng-class="formControlClass" ... />

JavaScript

$scope.formControlClass = 'form-control-error';

$scope.changeEmail = function() {
    $scope.formControlClass = 'form-control-success';
}

Answer 3

Answer №2

To set the return value as the setter and include the options in the ng-class object, you can use the following approach. If formControlColor evaluates to false, it will display an error CSS; otherwise, it will show a success CSS:

    <input type="text" id="email" ng-model="email" ng-change="changeEmail()" placeholder="email" 
ng-class="{'form-control-error': !formControlColor, 'form-control-success': formControlColor}" class="form-control input-lg margin-bottom-15">

Answer 4

To set the return value as the setter and include the options in the ng-class object, you can use the following approach. If formControlColor evaluates to false, it will display an error CSS; otherwise, it will show a success CSS:

    <input type="text" id="email" ng-model="email" ng-change="changeEmail()" placeholder="email" 
ng-class="{'form-control-error': !formControlColor, 'form-control-success': formControlColor}" class="form-control input-lg margin-bottom-15">

Set the class of an element dynamically using ng-class and detect changes with ng-change

Answer №1

Answer №2

Similar questions

Issue with loopback: Record cannot be inserted into associated model using lbServices functions

How to make Sails.js package accessible across all modules

What steps can I take to modify my webpage, like a dashboard, on the internet?

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

Understanding intricate JSON structures with JavaScript

The Cordova minification tool fails to compress files within the browser platform

How to populate an ExtJS 3.4 combobox with local JSON data in a few simple steps

In react-native, both the parent and child components are rendered at the same time

When using the .append method in jQuery, the JSON array only displays the last value of the array when iterating through it with

Show the total of a JavaScript calculation in a designated input box

Is it possible to display a "click" message when a button is hovered over using CSS?

Is it possible to save data to a file using React?

Mastering the art of redirection in Node.js

Connect to content on the current page

How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

Issue encountered while attempting to load several google charts simultaneously

The context of the selector causes an error to be thrown

Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?

"Utilizing jQuery's bind method with IE 7 compatibility and the use of

Tips for customizing the appearance of date circles and text in Vue V-Calendar.io