Hide input-help on form using AngularJS

Question

I'm currently learning AngularJS and i would like to accomplish a simple task. On a form input, i would like to hide corresponding 'input-help' even data entered in input is invalid. The way i'm currently doing this invoke some jquery. But i'm searching the way to do it using AngularJS logic. I think i should use directive but as i'm new to angular, i don't know exactly how to do it.

Here is the jsFiddle sample code working using jquery: JSFIDDLE

And here is the jsFiddle sample code not working (no jquery): JSFIDDLE {For test, enter just few text in password input and blur it}

This is the code i have: {jquery}

$(document).on('blur', '.immediate-help', function () {
    $(this).next('.input-help').fadeOut();
}).on('focus', '.immediate-help', function () {
    $(this).next('.input-help').fadeIn();
});

This works as expected but i would like to use angular directive to do it. Of course, i'm not against using jquery in angular directive.

So, to resume, i would like when blur input is triggered to hide 'input-help' even the text is not valid and using angular directive.

Could someone show me the right way to do it?

charlietfl · Accepted Answer · 2013-04-17 11:26:03Z

1

Several approaches:

Using script in directive:

elm argument within directive link callback is a jQuery object if jQuery.js loads before anugular.js in page... or it is a jQlite if jQuery.js not included.

jQlite has many of the most common jQuery methods so you can use :

elm.bind('blur....

See angular.element docs for list of jQlite methods.

Using ng-class

Give form and controls a name. This creates an object formName with properties represented by field names. You can then use angular expressions for classes, or properties like disabled within markup

<form name="myForm">
    <input name="passord"/>
    <div ng-class="{ShowMeClassName: myForm.password.$invalid}"> Error content</div>
</form>

ng-class will toggle the class ShowMeClassName depending on validity of field named password within form named myForm

edited Apr 17, 2013 at 11:26

answered Apr 17, 2013 at 11:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

6 Comments

A. Wolff Over a year ago

Thx for input but i don't understand where should i bind elm blur event in directive?

charlietfl Over a year ago

jsfiddle.net/wr5bk/2 ... using same directive for validation...note I changed order of angular/jQUery loading so could use fade animations which aren't supported in jQlite

A. Wolff Over a year ago

Ok works now (without using delegation in your jsfiddle) Thank you!

charlietfl Over a year ago

one important trick, not relevant to this situation but you will encounter it... if elements are being created on the fly and directive needs to do manipulation...wrap code in $timeout . Even with zero delay it gives angular compiling diges a chance to finish

charlietfl Over a year ago

only talking about manipulation or code that can't use dlegation. Agin, is not aplicable to this situation unless your form controls are built on the fly

|

bfcamara · Accepted Answer · 2013-04-17 11:11:41Z

1

You can use Angular-ui.

Angular-UI provides a bunch of directives, which can help you. You have the ui-event directive.

For example you can use

<input ui-event="{ blur : 'blurCallback()' }">
...
<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

answered Apr 17, 2013 at 11:11

bfcamara

3231 gold badge2 silver badges10 bronze badges

2 Comments

A. Wolff Over a year ago

If i get it, Angular-ui is a 'addon' or is it implemented by default in angular js source?

bfcamara Over a year ago

AngularUI it is an 'addon' which you have to include in your scripts.

Collectives™ on Stack Overflow

Hide input-help on form using AngularJS

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related