Write Angular 2+ Custom Form Control

We use form to collect data from user and save it as an object, a record, or a document into backend data-storage.
In simple case like User profile, all we got are name, email, phone number, age, birthday ...etc., nothing more than a string, number, or date, there are already built-in html5 inputs to handle data of these certain types, and Angular 2+ also integrated them naturally, but how about data field of some more complicated type? or when the ordinary flat inputs can not satisfy my desire for a more splendid UI ?



In my case, I need my custom form controls for data fields of certain type below:

• Album
• Business Hours
• Blog-liked article

 Each control will handle the UI of input-output data-flow and treat each data object as a whole, with all the sub-level data fields hidden from world outside the control.

To speak in Earth-English, I want to write something, take Album as example, in Html like this:

<album-control [album]='album'></album-control>

Then Angular, and some other genius developer, will know that this is the damn-right control which handles every shit about an album, or every shit they can throw upon the album, just initialise the component, bind the album model to it, and leave it to those picky users.
In Angular 2+ they've classified 2 methods of form construction, Template-Driven Forms and Reactive Forms(A.K.A model-driven forms).

With template-driven way you can scratch any control logic for any data type you want. Basically it means as long as any custom data object can be decoupled to data fields of primitive types, surely you can combine primitive inputs to fulfill the control logic. the difference is that you don't package the code into another component and let them scattered in your form controls. It's actually a matter of code ugliness.

It's Reactive Forms which we seeks to add the custom control. Like if there is a field of string, say "name", we just initialise the form control with its value and write <input formControlName='name'/> in Html, then Angular knows it.

To make a component to achieve this effect we need to follow Angular's rule, by implementing three methods of ControlValueAccessor: writeValue(), registerOnChange(), registerOnTouched()
The writeValue() tells the component how to transform data passed in from its parent form.
The registerOnChange() will register the emit function, which emits change to outside world whenever you want it to do so.
The registerOnTouched() does similar thing as registerOnChange() but it notifies with "touched" event.

Here is the code implementation example.