0

I am wrapping a angular material autocomplete component in angular 5. While wrapping that component, I am facing issue because I am exposing an input property of type observable to add a custom filter i.e., filtering which you can see in this link:stackblitz1. Here in the parent component,one can give any filter like 'startwith','endwith' or 'contain' etc.Here the filtering is not working. It is just behaving as Simple Autocomplete without filter. But if that custom filter is used in the child component only, without exposing an input property like hardcoding, it will work,I have given that link also:stackblitz2. I tried with ngOnChanges also, but it is not working.

Is there any other way to get the same behaviour as in the stackblitz2 wby exposing the input property i.e., hardcoding?

Shreelakshmi G
  • 119
  • 2
  • 16
  • 1
    Because the actual input is in `Autocomplete` component. You cant subscribe to that input via `valueChanges()` from different component (`InputOverviewExample`). Either add FormControl to `Autocomplete` or bind that input to some event (like keypress) and `Output()` value to `Autocomplete`, so it emits and runs filter and then sends result back to `InputOverviewExample`. Obviously seems redundant (can use service, though), so better try to keep FormControl in that component where events happens – Julius Dzidzevičius Apr 08 '18 at 15:58
  • Thank you for your quick response, I am not getting you, can you please elaborate it? – Shreelakshmi G Apr 08 '18 at 17:35
  • 1
    Here a stream of keyboard events is mapped to other Observable (`filteredChoices`) and then subscribed in template with `async` pipe. This might be tricky to grasp if you don't know Rxjs. First you set formControl - `[formControl]="myControl"` then this `this.myControl.valueChanges` returns an Observable (stream of keyboard clicks), so you map those values and on every emit you apply filter func - `map(val => this.filter(val))`. And lastly in template you subscribe `let option of filteredChoices | async`. Thats all I can tell. I see you dont use FormControls, so have no idea whats your goal – Julius Dzidzevičius Apr 08 '18 at 19:17
  • Thanks for the response.It will work fine.I have modified the code [link] https://stackblitz.com/edit/angular-ojktzw-2mwmgu?file=app%2Finput-overview-example.html .Here I want the component to work for all the forms, it is working for formControl,but for Reactiveforms ,it is not even filtering,it is throwing some error saying Error: Cannot find control with unspecified name attribute. Please suggest me to resolve this. – Shreelakshmi G Apr 10 '18 at 19:01
  • And it should not expose the input property for all forms.Thanks in advance – Shreelakshmi G Apr 10 '18 at 19:21
  • 1
    What I can advice is to look deeper in docs about Reactive Forms. I dont think its a right way to use FormBuilder as you did. Here I forked - https://stackblitz.com/edit/angular-ojktzw-x7crrq?file=app/input-overview-example.html . Autocomplete works just because I removed brackets `[]` from `formControlName` because you use a parent FormGroup and as I understand you want to associate that FormControl with it – Julius Dzidzevičius Apr 10 '18 at 19:49
  • Thank you so much, this is working – Shreelakshmi G Apr 24 '18 at 15:02

0 Answers0