Angular Material custom form field component circular dependency injection error

I've been trying to create a custom form field control using Angular material. I need it to work with both Reactive Forms and NgModel.

I've been following this documentation from Angular Material: https://material.angular.io/guide/creating-a-custom-form-field-control

The component is working as expected when using NgModel. But when I change over to using Reactive forms the Validate method from the Validator interface is never called.

The class implements the following interfaces:

export class MaterialMultiSelectComponent implements MatFormFieldControl<any[]>, ControlValueAccessor, Validator, OnDestroy


In the providers section, I have added this, as suggested in the documentation.

providers: [
{
provide: MatFormFieldControl,
useExisting: MaterialMultiSelectComponent
},
]


But I found this: https://blog.angular-university.io/angular-custom-form-controls/

Notice that without registering this class properly in NG_VALIDATORS,
the validate method will never get called.


But if I do add NG_VALIDATORS to the providers, like this:

providers: [
{
provide: MatFormFieldControl,
useExisting: MaterialMultiSelectComponent
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MaterialMultiSelectComponent),
multi: true
},
]


I get a circular dependency error

Error: NG0200: Circular dependency in DI detected for MaterialMultiSelectComponent


What am I missing?

Continue reading...