0

I use mat-autocomplete and there is a feature called [displayWith] that is used to format the value and some usefulness as far as I see. In this scene, I have the following questions:

1. What is [displayWith] exactly used for? Can it be used to check the type of the text in the autocomplete even if the user enters a free text rather than selecting an option? Or clear the input if none of the option is selected?

2. I want to call a method in as shown below in order to check if the value is selected or not, but it does not work. So, can I call the method according to the type of the text?

I use similar approach to that:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
  <md-option *ngFor="let state of filteredStates | async" [value]="state.id">
    {{ state.name }}
  </md-option>
</md-autocomplete>


displayFn = (data?: any) => {
    return data ? this.sometask(data) : '';
}

sometask(data) {
    console.log(typeof(data));
}
Jack
  • 1
  • 21
  • 118
  • 236

1 Answers1

1
  1. If you want to display different thing that is stored in control value you need to use displayFn e.q if you provide
displayFn(data)=>`${data.name}`

after you select item from list, you will see "Name" in autocomplete, where "Name" comes from data object {name:"Name"}. That's mean, you can display whatever you want without changing the control model.

  1. You need to provide the entire object as control value (it relates to 1. point, because now displayFn makes sense.) :)

<md-option *ngFor="let state of filteredStates | async" [value]="state">

Marcin Milewicz
  • 315
  • 1
  • 8
  • Thanks a lot for these good explanations. **1**. As far as see, it is mainly used for displaying data in different formats. In this case, for calling a method onSelected, there seems to be no need to use `[displayWith]` method if we do not need to anything regarding to display format. In this case we can use onSelected event. Is that right? – Jack Oct 24 '20 at 09:24
  • **2.** Actually I use [this](https://onthecode.co.uk/force-selection-angular-material-autocomplete/) approach in order to detect if the option is selected by checking the `typeof` the value. But, although the demo on that page works, my project always returns `string` to `RequireMatch` method in that example. So, maybe I need to set selected value in order to discriminate them from free text entries. But I am not sure if I should use `[displayWith]` for that? – Jack Oct 24 '20 at 09:28
  • You need to use it if you want to display state.name, because your control model should store entire object {name:string, id: string". Without displayFn, you see in placeholder [object Object] :) – Marcin Milewicz Oct 24 '20 at 09:29
  • **3.** On the other hand, may it be possible to clear the autocomplete input if the user cannot select an option? It seems to be impossible because [displayWith] only calls the method when selecting. If the user type after selection, it cannot catch this event and `blur` event also did not fix my problem after trying many different things :( – Jack Oct 24 '20 at 09:30
  • and probably, all depends on specific case, so it's hard to assume what's approach be the best. I recommend for you storing entire object in control and use displayWith for display formatting – Marcin Milewicz Oct 24 '20 at 09:31
  • You rock!.. With the help of you, no I understood `[displayWith]` well and also fixed the validation problem :) – Jack Oct 24 '20 at 09:45
  • Last question, as far as I see `displayFn(data){}` is only triggered when selecting an option, and in that case it is not possible to detect when user enters free text. Am I right? – Jack Oct 24 '20 at 09:47
  • Any reply please? – Jack Oct 24 '20 at 09:57
  • If you want to detect when user enters text, you need to subscribe on `valueChanges` on on your control e.g ```.valueChanges.pipe(startWith(''),tap(v=>console.log(v)));``` – Marcin Milewicz Oct 24 '20 at 10:17
  • What about calling a method like [this](https://stackoverflow.com/questions/49939310/binding-this-in-angular-material-autocomplete-displaywith-using-angular-5) example? I think the method called by the `displayFn` is also related to formatting selections. Is that true? I am wondering if there may be another usage you know. – Jack Oct 24 '20 at 10:47
  • displayFn should be use only for formatting purpose and in my opinion it should be pure function witout side-effect execution. Acting like in mentioned example introduces unnecessary complexity to code:) – Marcin Milewicz Oct 24 '20 at 10:49