Phone Input

Phone Input is a specialized form control for phone numbers with country selection, flag, dial code, formatting, and validation through libphonenumber-js.

Use it in profile, contact, billing, onboarding, checkout, support, invite, and contact forms when the value must be a real phone number.

Place ngs-phone-input inside one ngs-form-field and use Angular forms with formControlName or ngModel. Show invalidPhone with ngs-error. Use onlyCountries to limit available countries and preferredCountries to pin common countries to the top of the menu.

Do not use plain ngsInput, NumberInput, or InputMask for country-aware phone numbers. Do not use CountrySelect instead of PhoneInput; CountrySelect only chooses a country. Do not use PhoneInput for OTP, MFA, passcodes, or invite codes; use PinInput.

Key features:

Country selection with flag and dial code.
Country-aware formatting and validation.
Preferred and restricted country lists.
Angular forms integration and invalidPhone errors.

The NgStarter Angular Phone Input component lets you capture real phone numbers with country selection, flag, dial code, formatting, and libphonenumber-js validation. Use ngs-phone-input inside one ngs-form-field for profile, contact, billing, onboarding, checkout, support, invite, and contact forms when the value must be a real phone number. It includes examples for Basic phone input, Phone input with custom country list, Phone input with preferred country list, and Phone input only countries.

Basic phone input

Use a basic phone input when a form needs a real phone number with country-aware validation.

Value: +15165867279

Phone input with custom country list

Use onlyCountries when the business flow supports phone numbers from a limited set of countries.

Value: +447874482198

Phone input with preferred country list

Use preferredCountries to show common countries first while keeping the full country list available.

Value: +15165867279