Default Validators for Angular Custom Components

Hareesh
2 min readDec 13, 2020

I have seen many developers and including myself on how the Validators can be applied to the Angular Custom components and why angular default validators are not working for the custom components. This is simple and which is missing because we miss the simple understanding :D.

First, there is no difference between adding the Validators to the Basic Form Components like input and Custom Angular Components. The same required validator can be applied to both of them. Let's understand what is there within the required validator,

The required validator is true if the control value is either null or the length is equal to zero. So as long as the Angular Custom component returns either a null or empty string or an empty array, the required value works well for the custom components. So that's it, it's all about what the custom component returns the value, any validator can be applied.

An example of an address custom component is as below,

In the above code in the registerOnChange method, is publishing the value to the valueChangeFn only when the value is valid otherwise a null value is published. This making sure that the values are validated before publishing them from the custom component.

We will discuss the default validators of the custom component in the next strory.

So let me know if you have any suggestions or comments.

--

--

Hareesh

Everything will be Alright in the End, if not then it's Not an End.