Code Killer Input — A Reactive Approach

Some weeks ago I wrote about Scaling a UI Delivery and I mentioned how important is to create a design system. The design system will make the application’s layout solid and save lots of time to reimplement interfaces.

Some components are essential in the design system’s creation process:

• Inputs;
• Buttons;
• Typography;
• DataTables;

I just talk about DataTables in another post, now I will talk about Inputs.

This Input can be the base of many other components like:

• Checkbox;
• Switch Button;
• Input Filter;
• AutoComplete;

Fist of all, as always, I have a repo with the code example to help you!

norato/reactive-atomic-design

Add Native behaviors

Let´s add the input native behaviors, passing it from Inputs

Integrating with Reactive Forms

In a real-world project, we need to integrate the input with a parent form. Here we can do it in two different ways, you can pass the formControl or the form and the formControlName.

We will use at the template the formControl to bind the value to the input, but some changes in the template are necessary. Some native behaviors need to be removed. The value and the disabled we will remove from the template and add by formControl.

When we use the reactive forms into an input component using its directive, it will automatically bind the value and listen to the events from the element.

But we will not remove the value input, we can use it to set a default value to the input, it will be super useful!

So the value property will be integrated into the form using the setValue method without emitting an event to the form. When you set it, it will bind into the template.

Another change we make here is on the disabled property. It continues working, even we use reactive forms, but rise a warning and alert us to remove it from the template and toggle the disabled HTML property from the form.

The previous snapshot has the implementation using only the formControl, but I think it good to allow to pass by input the form and the fromControlName, from a parent form. This way we can integrate more efficient this component to the parent form.

Here we only need to do is when the formControlName is set to get its abstractFromControl from the parent form. After that, set this control to the component control.

Dispatch Events

One of the code killer features from this component is the emit event. I really use a component like this in an on-production application, and it is amazingly useful.

Well, we have the input here and it is using the reactive form to control the values, state, and etc. We can take the benefits from the reactive form to emit events on control value changes.

So, if the input can emit events when it changes, we can use these events to make some features. I already implemented many components, only using this component inside that.

The implementation is very simple. We need to subscribe to the valueChanges from the formControl and emit the value. Easy and DRY!

We can add some RxJs operators to improve performance.

• takeUntil, to close the stream when the component is destroyed;
• debounceTime, to create a little delay to emit these values (do not emit every char on typing);
• detectUntilItChanged, to do not emit duplicated values;

PS: I wrote last week about those operators