CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrapvalidation
yuro
yuro

Reputation: 2209

Changing the css class through form validation in AngularJS

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>

Upvotes: 0

Views: 4397

Answers (2)

Florian
Florian

Reputation: 3144

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.

Upvotes: 0

kTT
kTT

Reputation: 1350

Try it this way:

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

Upvotes: 1

Related Questions