DEV Community

Anirban Mukherjee
Anirban Mukherjee

Posted on • Updated on • Originally published at theangularpath.anirbanblogs.com

Custom angular form component

GitHub logo anirbmuk / CustomFormElement

Angular 12 application for custom form element

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.

Preview

Let's first talk about the component itself.

The GUI

app.component.html

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

Implementation

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.

Modal

Submitted form 1

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 describing the component.


Now let's see how to set it up

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 method 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. This is how the form knows that one of its members has changed its value.
registerOnTouched is used to let the wrapper form element know that one of its elements has been marked as touched.

Error handling

Question: Now that we are done with setting up the value read/write operations, how about error handling? How do we let the wrapping angular form know if our custom component has an error and needs to be marked as invalid?
Answer: To do this, we inject an instance of NgControl into the component, which gives us the FormControl instance. It is this form-control object which sets the errors in the component conditionally. Remember, it is a custom component, so everything needs to be set by us :-)
Note: The ErrorStateMatcher has nothing to do with this implementation, but it is more for the material input component. ErrorStateMatcher marks the component in red when it has an error.

NgControl
Error handling

As a result, if allowUnlistedValue is set as false, the user will not be able to enter a value which does not exist in the list, and the component (and subsequently the form) will be marked as invalid. This is demonstrated by disabling the Submit button when form is invalid!

Submitted form 2


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!
Anirban Mukherjee

Top comments (3)

Collapse
 
timsar2 profile image
timsar2

I made it with an ngfor and dynamic element, But could'nt write a test for it.
I would be good and thankfuly if you write test too and use dynamic element with ngfor

Collapse
 
anirbmuk profile image
Anirban Mukherjee

Yes unit tests were far from my mind when I wrote this article, should ideally take a look at it :-)

As for dynamic components, this article is not quite related to that. I wrote another article Angular dynamic components with code splitting which might be closer to what you're talking about.

Collapse
 
timsar2 profile image
timsar2

Very well, Looking for your next post that wil cover unit testing and dynamic element 😅😄