AngularJS - how to refactoring a CSS code style

Question

I have an angular function like this:

$scope.colorValidator = function () {

    $scope.token_style = "";
    $scope.expdate_style = "";

    if (!$scope.$$childHead.billingblock.accountID.$valid) {
        $scope.token_style = {border: "1px solid #ff0000"}
    }

    if (!$scope.$$childHead.billingblock.expDate.$valid) {
        $scope.expdate_style = {border: "1px solid #ff0000"}
    }

};

How can i set the {border: "1px solid #ff0000"} in a constant variable (maybe like red), and set it in each validation ?

Edit: I'm setting ng-style (in the view) for each input.

Instead of making a constant in JavaScript, you should consider creating a CSS class .valid-field and using the JavaScript to apply that as necessary. Styles belong in stylesheets, not in code. — Moshe Katz
– Moshe Katz, Commented Jul 24, 2014 at 16:13
Oh, and how can i add it to the angular code? like: $scope.expdate_style = 'valid-field' ? — Jhonatan Sandoval
– Jhonatan Sandoval, Commented Jul 24, 2014 at 16:16
Looks like Angular has a class predefined for you: .ng-invalid. See @vittore's answer. — Moshe Katz
– Moshe Katz, Commented Jul 24, 2014 at 16:21

vittore · Accepted Answer · 2014-07-24 16:16:35Z

1

You do not need to do that.

Check you markup when fields are not valid, they have ng-dirty and ng-invalid classes applied

Use them to style your controls

.my-special-form .ng-invalid {
    border: 1px solid #ff0000
}

answered Jul 24, 2014 at 16:16

vittore

17.6k6 gold badges46 silver badges84 bronze badges

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

1 Comment

Jhonatan Sandoval Over a year ago

Now, when the page loads it shows the ng-invalid for all required fields.

sylwester · Accepted Answer · 2014-07-24 16:18:12Z

1

Please see here: http://jsbin.com/hekaz/3/edit?css,output

ie:

input.ng-invalid[ng-model="username"] {
  border: 5px solid red;
}
input.ng-valid[ng-model="username"] {
  border: 5px solid green;
}

answered Jul 24, 2014 at 16:18

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

Jhonatan Sandoval · Accepted Answer · 2014-07-24 16:32:09Z

-1

I solved it setting it a variable:

var redColor = {border: "1px solid #ff0000"};

if (!$scope.$$childHead.billingblock.accountID.$valid) {
     $scope.token_style = redColor;
}

Thank you to everyone for each answer.

answered Jul 24, 2014 at 16:32

Jhonatan Sandoval

1,2936 gold badges24 silver badges40 bronze badges

Collectives™ on Stack Overflow

AngularJS - how to refactoring a CSS code style

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related