Angularjs directive to add a class to form inputs on form's submit event

Question

I am using ng-class to add submitted class to my inputs when form is submitted like

<form name="myform" novalidate>
<input name= "input1" ng-class="{'submitted':myform.$submitted}" ng-model=data.input1/>
.....
....
</form>

Although it gets the job done but it is too verbose and I have many inputs where I need this. I want to create a directive to make my html look like

<form name="myform" novalidate>
<input name= "input1" set-submitted ng-model=data.input1/>
.....
....
</form>

How can I create a directive for this purpose?

Why not add class to form itself in only one place instead of all elements? — dfsq
– dfsq, Commented Dec 28, 2014 at 11:00
Frankly, I just wanted to know how I can create a directive for this particular purpose. yes you are right about adding class to the form and ng-submitted class is automatically added to the form when it is submitted — Muhammad Adeel Zahid
– Muhammad Adeel Zahid, Commented Dec 28, 2014 at 11:09

dfsq · Accepted Answer · 2014-12-28 11:17:19Z

2

It's better to simply use ng-submitted class that is automatically set on form by Angular on form submit.

However for academic purposes here is a simple directive to set class on elements itself:

app.directive('setSubmitted', function() {
    return {
        require: '^form',
        link: function(scope, element, attrs, ngFormController) {
            scope.$watch(function() { 
                return ngFormController.$submitted;
            }, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.toggleClass('submitted', newVal);
                }
            })
        }
    };
});

answered Dec 28, 2014 at 11:17

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Muhammad Adeel Zahid Over a year ago

can u please explain second argument to toggleClass?

Muhammad Adeel Zahid Over a year ago

does this function comes from jquery or its core angular?

dfsq Over a year ago

This is a method of angular.element, implementation of jQuery's toggleClass method. The second boolean argument determines if the class should be added (true) or removed (false). You could also use if block with addClass and removeClass.

Collectives™ on Stack Overflow

Angularjs directive to add a class to form inputs on form's submit event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related