Country Select

nsi-country-select is a searchable country dropdown that displays all countries with their emoji flag icons (e.g., πŸ‡ΊπŸ‡Έ USA, πŸ‡¬πŸ‡§ United Kingdom). Type to filter the list.

It implements ControlValueAccessor, working seamlessly with both ReactiveFormsModule ([formControl], formControlName) and FormsModule (ngModel). The emitted value is the ISO 2-letter country code (e.g., "US", "GB").

Selected code: {{ countryControl.value || 'β€”' }}

Disable Readonly

Inputs

errorMessages
An IErrorMessages object mapping validation error keys to display strings. (optional)
externalLabel
When true, the component expects a label element outside the component (using for + id). Defaults to false. (optional)
readonly
When true, the dropdown is displayed but cannot be interacted with. Defaults to false. (optional)

Value

The component emits and accepts ISO 3166-1 alpha-2 country codes (e.g., "US", "GB", "ES"). The displayed text shows the flag emoji and full country name.

Works with both ReactiveFormsModule and FormsModule.

FormControl example

{{ formControlCode }}

FormGroup / formControlName example

{{ formGroupCode }}

Readonly example

{{ readonlyCode }}