Changing the css class through form validation in AngularJS

Question

I have an form with 3 input fields, who will validate. Important is to change the error respectively success class when the user does an interaction with the form.

<form class="form-horizontal" name="myForm" novalidate>
  <div class="form-group-sm has-feedback" ng-class="{ 'has-error' : myForm.Name.$invalid && !myForm.Name.$pristine || myForm.Name.$touched }">
    <label class="control-label" for="name-id">Name</label>
    <input type="text" 
                   class="form-control" 
                   placeholder="Name"  
                   name="Name"
                   ng-model="selected.name"
                   ng-pattern="/^[a-zA-Z]+/" 
                   ng-required="true"
            />
    <p class="help-block" ng-show="myForm.Name.$error.required && myForm.Name.$touched">Name is required</p>
    <p class="help-block" ng-show="myForm.Name.$error.pattern">Name must be written with letters</p>
 </div>
...

When the user considered the required field and the pattern then after the interaction with the input field, it should be changes the css class to has-success.

I've tried this:

<div class="form-group-sm has-feedback" ng-class="myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched ? 'has-error' : 'has-success'">
...

But it doesn't work correctly. Can anyone help me?

I've found the solution. Here is my code:

<div class="form-group-sm has-feedback" ng-class="{ 'has-error' : myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched, 'has-success' : myForm.Name.$valid }">
...
</div>

kTT · Accepted Answer · 2015-06-08 10:51:25Z

1

Try it this way:

<div class="form-group-sm has-feedback" ng-class="{'has-error': myForm.Name.$invalid && !myForm.Name.$pristine && myForm.Name.$touched}">

answered Jun 8, 2015 at 10:51

kTT

1,37011 silver badges19 bronze badges

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

7 Comments

yuro Over a year ago

Yeah this is only for has-error but I've found the solution in an other thread. I will edit my question post with the answer :)

kTT Over a year ago

@yuro you should extract this condition as a function hasError(myForm) and then apply this as: {'has-error': hasError(myForm), 'has-success': !hasError(myForm)}

yuro Over a year ago

How can I define this in a function? Do I have to define the value as like a string in the controller?

kTT Over a year ago

@yuro You define it in controller $scope.hasError = function (form) { return form.Name.$invalid && !form.Name.$pristine && form.Name.$touched; };

kTT Over a year ago

@yuro You send your form. <form name="myForm"> ... it's available via variable myForm and you can pass it to the controller function.

|

Florian · Accepted Answer · 2015-08-19 09:33:35Z

I would recomment a directive like this, as it makes your html a lot shorter.

/* Attach this to input fields to replicate the foundation abide behaviour for invalid form inputs
 * Marks the parent with class 'error' and toggles ng-hide on all elements with class error within
 * the parent element of the input */
.directive('ppHasError', [function() {
    return {
        restrict: 'A', //attribute only
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            var formName = element.parents('form[name]').attr('name');
            if( !ngModel )
                return;
            var parent = element.parent();
            if(parent.is('label'))
                parent = parent.parent();
            var errEl = parent.find('.error');
            scope.$watchGroup([formName + '.' + ngModel.$name + '.$invalid', formName + '.' + ngModel.$name + '.$touched'], function(newValues, oldValues) {
                var isInvalid = newValues[0];
                var touched = newValues[1];
                var isError = isInvalid && touched;
                parent.toggleClass('error', isError);
                errEl.toggleClass('ng-hide', !isError);
            });
        }
    };
}])

which can be used like that:

<div class="medium-10 small-9 columns">
    <label>{{ 'card_number' | translate }}</label>
    <input class="card-number" name="creditcardNumber" ng-model="paymentInfo.creditcardNumber" size="20" placeholder="4111111111111111" type="text"
        pp-has-error required="true">
    <small class="error">
        {{ 'card_number_error' | translate }}
    </small>
</div>

It will set the CSS class 'error' on the parent div and toggle the small.error tag using the ng-hide CSS class.

I will try this and then write my comment here. but thanks for your help!

Collectives™ on Stack Overflow

Changing the css class through form validation in AngularJS

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related