I'm trying to create a directive that should be used on inputs to perform an autocomplete task.
I want the directive to hook onto a form control, execute a request when the value of that control meets specific criteria and manage a mat-autocomplete.
For example, say I have this control:
<mat-form-field appearance="outline" floatLabel="always"> <input type="text" matInput [formControl]="form.controls.name"> </mat-form-field>
I want my directive to be used like so:
<mat-form-field appearance="outline" floatLabel="always"> <input type="text" matInput [formControl]="form.controls.name" appAsyncAutocomplete> </mat-form-field>
Then, the directive will listen to that formControl's valueChanges observable, use the control's input to make requests, and display a list of options to autocomplete.
I don't know how to get a reference to the form control inside the directive. Injecting NgControl throws NullInjectorError: No provider for NgControl.