Web development

Preventing user from typing invalid characters in AngularJS (no jQuery)

3rd May 2016 AngularJS, Web development No comments

This is actually pretty simple when done using custom directive, main design detail is to use ngModelController. ngModelController provides us with a few interesting possibilities:

  • getting view value ($viewValue property)
  • getting model value ($modelValue property)
  • setting view value ($setViewValue function)
  • access to $parsers and $formatters
  • access to $validators
  • access to field’s ngModel state properties like $touched, $pristine etc.

$validators are useful to do validation of user input and marking field as invalid. But if we want to prevent user from typing some character that we consider invalid we should user $parsers. A function registered as a parser will be invoked every time a model value is to be updated. Registered functions are invoked in order or registration and output from previous function is input to the next one – just like in Chain of Responsibility design pattern. This gives us opportunity to check value that is to be set in the model and modify it. Let’s take a look at an example:

Directive comValidate requires ngModelController. Once ngModelController is injected to directive’s link function we can register a parser function which will do required tests of value provided by the user. In above directive a test is done to check if value is a number. If it is then newValue is passed on to next $parser function. If not, then:

  • view value is updated and rendered – it is important to call $render otherwise user would see invalid character from time to time (although it would not be present in the model)
  • current model value is passed to the next $parser function instead of newValue. This is also important – as if we return e.g. undefined input will be cleared.

Example code on plunkr.

Have a nice day !

AngularJS animations – building a simple menu

12th January 2016 AngularJS, Web development No comments

AngularJS animations with ngAnimate are really easy and fun. AngularJS directives are ngAnimate aware so after including ngAnimate as a dependency we can add animations and transitions. We can apply animations in different phases depending on directive use. In order to apply animations we can use CSS or JavaScript or both. Below is a simple case – CSS based animation with ng-show. This is a very simple animation – we need to add only one class to get animation up and running.

CSS

Last two selectors are important when considering menu – we want to open menu smoothly. So we need to add a transition with ease in both in and out phases. We will transform all elements. When showing or hiding element AngularJS just adds or removes ng-hide CSS class so, after AngularJS docs, we need just add a .ng-hide class in case of ng-show directive.

menu-panel class selector is animating opening of menu while menu panel with ng-hide selector is animating closing transition.

Now directives – I used lists so I don’t have to position the elements.

And finally html:

As you see menu is super easy to use and it is declarative – no DOM manipulation, no jQuery. Of course we can use jQuery in a convenient way with ngAnimate. See ngAnimate documentation.

Running example in plunkr.

Have a nice day 🙂 !