Gå til innhold

Land-velger (country-select)

Gjenbrukbar, søkbar landvelger med flagg-emoji, bygget på ng-select. Erstatter frie tekstfelt for land. Komponenten er en ControlValueAccessor, så den brukes med formControlName (reaktive skjema) eller [(ngModel)] (mal-skjema).

Tatt i bruk første gang på CRM-kundekortet (hovedadresse og adressemodal, se CRM-modulen), men generell og kan gjenbrukes overalt.

Feature-tabell

Komponent Selector Hovedfunksjon Import
CountrySelectComponent app-country-select Søkbar ISO 3166-landvelger med flagg; lagrer ISO-KODE (alpha-2 eller alpha-3) Standalone og SharedModule

Kildefiler

Del Sti
Komponent ui/ePortal.ui/src/app/shared/components/country-select/country-select.component.ts
Landliste ui/ePortal.ui/src/app/shared/components/country-select/countries.ts
Tester ui/ePortal.ui/src/app/shared/components/country-select/country-select.component.spec.ts
Eksport ui/ePortal.ui/src/app/shared/shared.module.ts (importert og eksportert)

Lagringsbeslutning — ISO-kode, ikke navn

Komponenten lagrer ISO-koden, ikke visningsnavnet. Dette er en bevisst beslutning tatt etter å ha verifisert databasekolonnene (jf. prosjektregelen «verifiser mot kilde før du velger»):

Felt Kolonne Type codeType
Kundens hovedland wv_Actor.actCountry nvarchar(2), standard NO alpha2 (standard)
Adresse-land (adressemodal) wv_Actor_Adresse.actaCountry char(3) alpha3

Begge kolonnene er kode-kolonner (ikke fri tekst), så et visningsnavn ville blitt avkortet/ødelagt (nvarchar(2)). Derfor lagrer velgeren koden, og codeType-input velger bredden. Flagg-emojiet utledes alltid fra alpha-2 i countries.ts (countryFlag), så det aldri kommer ut av synk med koden.

Bakoverkompatibilitet: en eksisterende/ukjent lagret verdi beholdes ordrett (en gjennomslags-rad legges til) så ingen data går tapt eller skjules. En lagret alpha-3-verdi (NOR) løses også opp mot riktig land når codeType="alpha2".

Bruk

<!-- Kundens hovedland (nvarchar(2)) -->
<app-country-select formControlName="country" codeType="alpha2"></app-country-select>

<!-- Adressemodal-land (char(3)) -->
<app-country-select formControlName="country" codeType="alpha3"></app-country-select>

Komponenten er eksportert fra SharedModule, så feature-moduler som allerede importerer SharedModule (f.eks. CRM) kan bruke den uten ekstra import. Den er også standalone, så standalone-sider kan importere klassen direkte.

Inputs

Input Type Standard Beskrivelse
codeType 'alpha2' \| 'alpha3' 'alpha2' Hvilken ISO-kodebredde skjemakontrollen lagrer.
clearable boolean true Om valget kan tømmes (tom verdi).
disabled boolean false Deaktivert tilstand (styres også av setDisabledState).
placeholder string '' Overstyrer standardteksten (Crm.selectCountry).

Komponenten har ingen @Output() — verdien flyter via ControlValueAccessor (formControlName/ngModel).

Oppførsel

  • Søk: searchFn matcher term (case-insensitivt) mot norsk navn, engelsk navn og begge ISO-kodene, så «tysk», «germany», «DE» og «DEU» alle treffer Tyskland.
  • Sortering: listen sorteres på norsk navn (localeCompare(..., 'nb')).
  • Standardforslag: Norge finnes i lista, men tvinges aldri — tom kontroll gir tomt valg.
  • appendTo="body": dropdownen rendres på body slik at den ikke klippes av skjema-/modal-scrolling.

i18n

Placeholder-nøkkelen finnes i BÅDE no.json og en.json under Crm, og «ingen treff»-teksten under General:

"Crm":     { "selectCountry": "Velg land …" },   // en: "Select country …"
"General": { "noResults": "Ingen treff" }         // en: "No results"

Landnavnene bor i countries.ts (norsk + engelsk), ikke i i18n-filene.

Tilgjengelighet og mobil

  • Flagg-emojiet er aria-hidden="true" (dekorativt); landnavnet er den tilgjengelige teksten.
  • ng-select gir tastaturnavigasjon og søk som standard.
  • appendTo="body" hindrer klipping i modaler og scrollende skjema.

Kjente fallgruver

Fallgruve Riktig mønster
Anta at kontrollen lagrer landnavnet Den lagrer ISO-KODEN. Bruk codeType som matcher kolonnebredden (alpha2/alpha3).
Bruke alpha3 mot actCountry (nvarchar(2)) Bruk alpha2 mot actCountry; alpha3 kun mot actaCountry (char(3)).
Hardkode landliste per side Bruk COUNTRIES fra countries.ts — én kilde.
Vente at flagg lagres Flagget utledes fra alpha-2 ved visning; det lagres aldri.

Verifiseringspunkter

  1. Åpne CRM → Ny kunde: land-feltet viser en søkbar liste med flagg; velg et land og lagre — actCountry inneholder alpha-2-koden.
  2. Åpne en eksisterende kunde med lagret NO: velgeren viser «Norge» forhåndsvalgt.
  3. Åpne adressemodalen: land-feltet lagrer alpha-3 (char(3)).

Relaterte sider