0

I am trying to create multiple dropdowns in Angular and need every drop down to display one less option. I got this far but now my dropdown always initializes with a value. I have multiple dropdown and try to use one single options array and generate my data based on these options. I also dont know beforehand how many dropdown I will need. The issue is that I also need a blank value the user sometimes does not want to select value.

https://stackblitz.com/edit/primeng-dropdown-demo-4tffmy?devtoolsheight=33&file=src/app/app.component.ts

Best regard

Lucas
  • 23
  • 1
  • 5

1 Answers1

2

I'm not entirely sure what you are trying to do, but does this help with what you are trying to achieve?

getOptions(country: Country) {
  let index = this.cities.findIndex(c => c.country === country);
  return this.cities.slice(0,this.cities.length - index);
}

constructor() {
  this.countries = [
    { name: 'USA' },
    { name: 'Italy' },
    { name: 'UK' },
    { name: 'Turkey' },
    { name: 'France' }
  ];

  this.cities = [   
    { name: 'New York', code: 'NY', country: this.countries[0] },
    { name: 'Rome', code: 'RM', country: this.countries[1] },
    { name: 'London', code: 'LDN', country: this.countries[2] },
    { name: 'Istanbul', code: 'IST', country: this.countries[3] },
    { name: 'Paris', code: 'PRS', country: this.countries[4] }
  ];
}

<p-dropdown [options]="getOptions(country)" [ngModel]="dataBind.get(country)" optionLabel="name"
        (onFocus)="createCityOptions()" editable="true" optionLabel="name"></p-dropdown>

If it does not and you can describe your intent some more, I will gladly update the answer.

You might also want to check this StackBlitz.

H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37
  • Yes this is closer to what I want to achieve. However there is still this empty label when the user opens the dropdown. Somehow the dropdown gets initialized with the first value of the options array. I want the drop downs to behave like a normal dropdown however each dropdown has 1 less option than the previous dropdown. The amount of dropdowns is always <= options.length – Lucas Jul 22 '21 at 21:13
  • I updated the answer to not include an empty value in the dropdown and doesn't have initialized values... I also added a StackBlitz you might find interesting for what you are trying to do. – H3AR7B3A7 Jul 22 '21 at 21:34
  • thanks. This is closer to what I want to achieve. However I cant have the dropdown be editable. – Lucas Jul 22 '21 at 22:24
  • Hmm, you might want to check the documentation if that is even possible at all. Dropdowns are usually meanth to restrict the user to some options. There might be some way to do it, but I think the idea is you either give them an 'empty' option (this can contain any value that you consider as a non-choice in your logic) or you give them the option to add their own option (that you are free to ignore in your logic). If you really want to, you could prevent writing in the editable in a hacky way by piping keyboardevents to not do anything at all for that nativeElement...) – H3AR7B3A7 Jul 22 '21 at 22:41