Angular reactive forms - Custom validation for a Custom UI Component

Question

I have an Angular Component that is a customizable "select" where user can search for results and select the desired value like this:

The component stores the selected value inside it to be read by it's parent component.

The page that will use this component use reactive forms to validate the fields, is there a way to customize the component to use the reactive forms of the parent component? Maybe my Component needs to extend the AbstractControl class, would it be right?

Since this is a custom field, i can't use formControlName on child, I have to built a custom validation logic on the component to validate whether any value has been selected because it's not a simple input or select field.

The structure is kind like this.

<div formArrayName="myFormArray" *ngFor="let contact of contacts">
   <app-select-search ...> //this is my custom component I want to validate using reactive forms with custom validation rule
   </app-select-search>
</div>

I have read lots of articles that shows how to use reactive form on child components to validate simple fields passing the parent form to the child component as an @Input but I couldn't find any example using a user custom defined rule like this

Note: This child component will be loaded dynamically so the parent component will have a Form Array to load it.

Answer 1

While I was writing this question I came with the idea of extending my component to the AbstractControl class. Then I started searching for this and found that this is exactly what I need. Follow a detailed article about this subject for anyone that faces the same problem as me: https://blog.angular-university.io/angular-custom-form-controls/