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

jQuery - translating and organizing names of countries

Ways to delete an attribute from a DOM element with Javascript

Managing a database update when server actions involve various form types

Is the state mutated when using the .map() function to update it?

Update the getJSON filter to only include specific results and exclude the majority

Retrieving information from a Rowdatapacket with expressjs

Disabling a button following a POST request

Verify if a set of Radio buttons contains at least one option selected

Dynamically assigning anchor tags to call JavaScript functions

Personalizing the User Interface of Azure AD B2C using dynamic HTML

Maintain the horizontal alignment of CSS floats

How to retrieve the third party child component within a Vue parent component

How can you display a set of components in React using TypeScript?

Using Angular JS for Traditional Multi-page Websites

Retrieve information from a row by clicking on it, then present it in a dialog box for editing

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Code snippet for a click event in JavaScript or jQuery

Dealing with $http errors: differentiating between user being offline and other error types

The functionality of Express JS routers is experiencing issues