Input Mask

Input Mask provides ready-made directives for formatting credit card inputs while the user types. Use the mask directives on native input elements, usually together with ngsInput inside ngs-form-field.

The available masks are ngsCreditCardNumberMask, ngsCreditCardExpiryDateMask, and ngsCreditCardCvvMask. They format the visible value, set useful mobile keyboard and autocomplete attributes where applicable, and write a cleaned form value for card number and expiry.

Do not treat Input Mask as a universal mask engine, validator, payment security layer, or compliance solution. Do not use it for phone numbers, custom IDs, tax numbers, IBAN, postal codes, date pickers, selects, currency or country fields, or formatting already saved data. Use PhoneInput, dedicated field components, validators, backend checks, or a custom mask directive for those cases.

Key features:

Formats card number, expiry date, and CVV/CVC fields while users type.
Works with native inputs and NgStarter Input/FormField composition.
Keeps form values cleaner than the visible formatted text where supported.

The NgStarter Angular Input Mask component lets you format credit card input fields while the user types with ready-made mask directives. Use on native inputs, usually with ngsInput inside ngs-form-field, for payment or billing fields that need credit card formatting. It includes examples for Credit card number input mask, Credit card expiry date input mask, Credit card cvv input mask, and Credit card input mask.

Credit card number input mask

Use ngsCreditCardNumberMask for card number entry. It displays grouped digits and stores the value without spaces in Angular forms.

Card number

Credit card expiry date input mask

Use ngsCreditCardExpiryDateMask for MM/YY card expiry entry. It limits the month and stores the value without the slash.

Expiry

Credit card cvv input mask

Use ngsCreditCardCvvMask for numeric CVV/CVC entry with a short length limit.

CVV