Wednesday, 11 September 2019

Angular - custom lookup form component

@angular/cli - 8.2.0

Most of our application requirements are fulfilled using standard HTML elements. However, we may sometimes need to stretch ourselves when we are working for large enterprise applications. In such cases, reusability becomes a strong factor which determines ease of development. Today's use case is one such custom requirement.

This article speaks about creating an Angular component which acts as a lookup - an input field with a search button. The button opens up a modal window, which shows a list of values from which the user may select one. Additionally, this new component should also angular-form-ready, which means, it should be capable enough to be registered as a template-driven or reactive form element.

Let's first talk about the component itself.



The app-lookup component takes in a couple of inputs - formConfig and lookupConfig. A sample implementation is shown below:


When user clicks on the search button, a modal window opens with data fetched from server (in my case a simple promise). Use selects a record and clicks select. The data gets populated on the input form.


If allowUnlistedValue is set as true, the user will be able to enter a value which does not exist in the list, and the value will be accepted. If not, then the form element will return empty value.



So this is all about the component. Now we need to extend this component so that Angular recognizes this as a valid form element. Since this element is of input type, I have implemented the interface ControlValueAccessor. This interface needs to implement 3 methods - writeValue, registerOnChange and registerOnTouched. The writeValue methods is the one which is responsible to writing your value to the view from your model. registerOnChange is used to propagate changes from your model to the view.


Once your TS class is set up with these methods, you need to set up a NG_VALUE_ACCESSOR provider to use this component as a form element.

Do note: A much more in-depth set of instructions for creating custom form elements can be found in a blog by Pascal Precht.

And there you go. You have your own angular component ready to be used in a form! You can download the source code from GitHub and play around with the configurations.

Cheers!

No comments:

Post a Comment