How to wrap ng-select in custom form controller?

I've tried to create a stackblitz to show what I'm talking about, but I cannot get it to work at all so I'm resorting to just asking for help. I have 2 components:

Component 1 is a custom form controller that wraps an ng-select and adds custom search functionality against a backend:

<div>
<label>Custom Component</label>
<ng-select
[items]="items | async"
.. Other properties
><ng-select>
<span *ngIf="select.value < 3">Type 3 characters to search</span>
</div>


Component 2 is a form that I'd like to use the customer controller in:

<form formGroup="fg">
<custom-controller
formControllerName="custom-prop"
>
</custom-controller>
</form>


In my custom controller I've implemented the ControlValueAccessor and I'm able to manually read the value from the ng-input and push it to the form. What I'm struggling with is the reverse (i.e. formGroup changes and I'd like the ng-select to reflect that). I've come up with a few ways of doing it, but they all seem really complicated and flaky.

Is there not a simple way to pass the formControllerName to the ng-select in my custom-controller and it function as expected?

Any examples of this working would be hugely appreciated as I'm struggling to find anything.

Continue reading...