Subscribe: Jeffry Houser's Blog
Added By: Feedage Forager Feedage Grade B rated
Language: English
angular module  angular  component  controller  directive  function  input  module  ngchange  ngmodel  ngpattern  ontextchange function  scope  view 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Jeffry Houser's Blog

Jeffry Houser's Blog

Jeffry Houser's Blog

Published: Sun, 23 Oct 2016 13:32:50 -0600

Last Build Date: Tue, 18 Oct 2016 09:00:00 -0600


Where can I find an Angular AutoComplete Component?

Tue, 12 Jul 2016 09:00:00 -0600

I have extensive experience with creating AutoComplete components in the Flex Space. When it came time to use one in an Angular project; I was lost. The client wanted something similar to the Flextras AutoCompleteComboBox, which supported type ahead filtering of the drop down list and a drop down button. However, every JavaScript AutoComplete component I could find was either missing the down arrow or didn't work. My Google-Fu was failing me. UI Bootstrap has both a drop down and a type ahead component. I was working on combining them into a single component when a Facebook friend turned me onto the Angular uiSelect component. It was exactly what we were after. Basic Setup The first thing we need to do is load the JavaScript libraries: Next, create an angular module: angular.module('ngChangeTest',[]); Every angular module needs at least one controller: angular.module('ngChangeTest').controller('someController',['$scope', function($scope){ }]); The controller, someController, is created as part of the ngChangeTest module. It uses Angular's dependency injection syntax to pass the $scope service into the controller function. $scope is an easy way to share data and functions between a view and a controller. Inside the controller, create a single variable and a single function: $scope.inputText = ''; $scope.onTextChange = function(){ console.log($scope.inputText); }; The inputText will be used with the ngModel of the textInput which we'll create in the view. The onTextChange() function will be executed when the ngChange event is fired in the view. This is the HTML view code: The ngChangeTest module is put on the body tag with the ngApp directive. The controller is added to a div. Inside the div is a text input. ngModel is associated with the $scope variable, inputText. And ngChange is associated with the onTextChange() function. Try this out: This works as I would have expected. For every keypress, the onTextChange() event is fired. The problem with ngPattern Once you introduce ngPattern into things get a bit more complicated. I'm going to use a regular expression that only accepts lowercase letters. Modify the HTML view to add the ngPattern directive on the input: The ngPattern directive does not modify the input and restrict what the user can enter into the input. It is just a regex used for validating the attribute. I was using this in a client's app which was using Angular form controls to determine whether an input was correct to determine whether the form could be submitted or not. The form was doing other validation in the ngChange method. However, I realized that the ngChange method was not firing consistently after the ngPattern directive was put in. Try this out: You can see from the console output that once I start typing uppercase letters; the ngChange function is no longer executing. By default, Angular prevents the ngModel from updating if the input does not meet the ngPattern; and then the ngChange does not execute if the ngModel is not updated. That was the problem I wanted to fix. Adding in ng-options We can tell Angular to always update the ngModel by using ngModelOptions: The ngModelOptions directive allows us to tweak how Angular interacts with the ngModel. It is an object which contains a list of options and their values. In this case, we only need to change a single property on the options object. Set the allowInvalid to true. This means that Angular will change the ngModel even if the value is not valid according to the ngPattern. The result of this is that the ngChange function will execute regardless of the correctness of the user's input. Play with this: Final Thoughts Sometimes Angular seems like a big block of unknown. There are many different ways to build angular applications and many different faucets that do not seem to be well documented, especially for changes that happen between versions. Finding these little gems is always a treasure. [...]