CODEWITHSUNDEEP
javascriptcssangularjs
basickarl
basickarl

Reputation: 40561

Dynamically set class in element with ng-class and ng-change

I would like my input field to have the class .form-control-error to start with. And when the user clicks on the input field and starts to type something in it I would like the input field to change to the css class .form-control-success.

I've tried with the following code but it doesn't want to change. The ng-change is however firing like it should so it's just got to do 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">

Upvotes: 0

Views: 1607

Answers (2)

Yaron U.
Yaron U.

Reputation: 7891

formControlColor is a function that returns the desired class, so if you want to use the return value of it in ng-class you should just invoke it

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

You should also set an initial definition for the function - so that it would have the first class when the page loads, so your JavaScript could should be something like

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

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

In your case, since the value is fixed and doesn't require any "calculation" - you can also remove the function and use a simple string - so it would be

HTML

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

JavaScript

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

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

Upvotes: 1

Lucas
Lucas

Reputation: 10313

You can have the return value be the setter and add the options to the ng-class object. In this case if formControlCOlor returns false, an error css is shown, else the success css is shown:

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

Upvotes: 0

Related Questions