Skip to content

08 Add a PsSelect to the edit page

Jump to bottom
Yirica edited this page Feb 12, 2021 · 3 revisions

After the introduction to bundle size analysis we will continue the journey with a look at another one of our components. The ps-select.

Task 1: Add a PsSelect for the types of the Pokémon

The selectbox should meet the following requirements:

  • Should be appended to the input controls of the pokemon-detail.page.
  • You can use DefaultPsSelectDataSource from @prosoft/components/select.
  • httpGetTypeList(...) from the shared/http folder and the corresponding dtos should be used to fill the selectable options.
  • The options should be loaded when the ps-select is opened for the first time.
  • The options should be displayed using the property 'name'.
  • The options should be identified by the property 'name'.
  • The selected options should be sorted to the top. Otherwise, the items should use default sorting.
  • The search should be debounced by 300ms.

Task 2: Add a custom Validation to the types

Create a custom validation function to the types control which meets the following requirements:

  • Shows message "You should not select more than two types." if more than two types are selected.
  • Shows message "You must select at least one type." if no type is selected.
  • Valid otherwise.

Task 3: Configure the ps-select without the DefaultPsSelectDataSource

  • Try to use the ps-select without creating a DefaultPsSelectDataSource in the .ts file. Hint

In the end your solution should look similar to our provided example in this commit. Note that the solution without a DefaultPsSelectDataSource is currently our favored method because it is shorter and generally makes the HTML more readable. Only create a data source if you need to customize its behavior.

As of now, this is the last step of the tutorial. Please take a moment and have a look at the conclusion.

Further information

Why should I use ps-select instead of mat-select? The ps-select provides built in filtering, sorting, error handling, a loading indicator and many more features. You have to build all of this yourself with the other options.
Clone this wiki locally