ngx-passport-input

Ngx-passport-input provides an input field component for passport number and have a countries dropdown list with flags associated with input field as a prefix. User can select a specific country and passport validation for that country will have to be satisfied. The country list can be customised based on configuration options to fit various needs and use cases.

Demo

Access all features demo here.

Getting started

Hope you already have an angular project, if not please create one using the below commands

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

once the angular application setup is ready, install the Ngx Countries dropdown using the following command

Installation

npm i ngx-passport-input

Import ngx-passport-input styles

Either import the CSS directly to styles.scss file

@import  "node_modules/ngx-passport-input/assets/styles.css";

Or, add CSS file in angular.json in the styles array in the build section

 "styles": [
           "node_modules/ngx-passport-input/assets/styles.css",
           "src/styles.scss"
         ],

Add the component selector

<lib-passport-input [countryConfig]="countryConfig" (passportOutput)="passportOutput($event)"/>

Configure country dropdown list

Below configurations are available for configuring countries dropdown list. Below model needs to be used for configurations

Model

export interface ICountryConfig {
    blockedCountryCodes?: string[];
    selectedCountryCode?: string;
    selectedCountryConfig?: IConfig;
    countryListConfig?: IConfig
    allowedCountryCodes?: string[];
}
export interface IConfig {
    hideFlag?: boolean;
    hideCode?: boolean;
    hideDialCode?: boolean;
  }

Configuration options

Configuration	Value and usage
blockedCountryCodes	It will accept an array of country codes which should not be displayed in country list. Ex. ['af','us']
allowedCountryCodes	It will accept an array of country codes which are allowed to display in country list. Ex. ['af','us']
selectedCountryCode	It will accept a country code string which needs to be the default country. Ex. 'in'
selectedCountryConfig	It will accept an ICountry object. Ex. if code needs to be hidded {hideCode: true}
countryListConfig	It will accept an ICountry object for country list. Ex. if country code needs to be hidded in the list {hideCode: true}

Passport field configuration

By default for non supported countries validation is there where user needs to enter at least 5 characters or number. This validation is configurable and you can pass your own regex to validate non supported countries. Component supports an input property passportConfig of type

 export interface IPassportConfig {
    isRequired?: boolean;
    regexForUnsupportedCountries?: IDefaultRegex;
}

By default passport field is required, you can disable passing isRequired property as false. For unsupported countries option to set custom regex can be done using regexForUnsupportedCountries

Output

The below output will be returned when user will enter the passport number

export interface IValidatedValue {
    value: string;
    isValid: boolean;
    countryCode: string;
}

License

MIT