I have multiple forms where users have to specify their country through an auto-complete.
I implemented a service performing the auto-completion (contact backend, handle responses and return suggestions)
Now I want to create a component to reuse throughout all the forms.
This component would depend on:
- the service I mentioned
- a
matInput field - a
mat-auto-complete.
The component would implement ControlValueAccessor and MatFormFieldControl
Parent components would use it like this
<mat-form-field>
<auto-completed-country formControlName="country"></auto-completed-country>
</mat-form-field>
The parent component creates the FormControl named country and specifies its validators (in some forms the country is required, while in others is not).
Question
Usually matInput is bound to a FormControl, and with an auto-complete through the [matAutocomplete] directive.
However in my scenario this would not be the case, as matInput is not bound to the FormControl, which I think it should be ok, as it seems that one can have a matInput not bound to any FormControl.
However I am worried about the [matAutocomplete] directive, which I figured reading the source that it interacts with matInput and its associated FormControl.
How should I approach this?
Am I making things more complicated than necessary?
