Type Error: dir.valueAccessor.registerOnTouched is not a function

I have a child component that is a dropdown select and I need to add formControlName from ReactiveForms, but this dropdown is not implementing the ControlValueAccesor. When I Submit the form the error appears:

> 2025-03-14T10:21:28.237Z ERROR [src/errors/global-error-handler.ts:23:0] TypeError: dir.valueAccessor.registerOnTouched is not a function
at cleanUpControl (forms.mjs:3151:23)
at _FormGroupDirective.removeControl (forms.mjs:5240:5)
at _FormControlName.ngOnDestroy (forms.mjs:5869:26)
at executeOnDestroys (core.mjs:10462:32)
at cleanUpView (core.mjs:10365:9)
at destroyViewTree (core.mjs:10200:17)
at destroyLView (core.mjs:10338:9)
at ViewRef$1.destroy (core.mjs:13127:9)
at ComponentRef.destroy (core.mjs:15920:23)
at _RouterOutlet.deactivate (router.mjs:2450:22)


this Dropdown comes from a library and i tried to modify in local but is not working, the error occurs in this component.

this.form2 = new FormGroup({
doc_dni: new FormControl('1', [Validators.required]),
docNumber: new FormControl('', [Validators.required, Validators.pattern(PATTERNS.nif)]),
codPostal: new FormControl(null, [Validators.required, Validators.pattern(PATTERNS.codPostal)]),
movil: new FormControl('', [Validators.required]),
});


and this in html:

<mac-select
formItemUtils
formControlName="doc_dni"
name="documents"
(click)="changePattern(form2.get('doc')?.value)"
[items]="documentos"
[placeholder]="'Comun.TipoAcceso1.PlaceHolderSelect' | translate"
bindLabel="doc"
bindValue="idDoc"
>
</mac-select>

Continue reading...