'angular-credit-cards' in your module's dependencies:
If you'd like to use the creditcards API directly, you can inject the service as
With the exception of
ccExp, all directives require
ngModel on their elements. While designed to be used together, all directives except
ccExp can be used completely independently.
All directives apply a numeric input pattern so that mobile browsers use a modified version of the enlarged telephone keypad. You should use
type="text" for all
Card Number (
- Strips all punctuation and spaces
- Validates the card against the Luhn algorithm
- Checks whether the card is the type specified in scope property in
- Otherwise, checks whether the card matches any valid card type
- Exposes the card type as
$ccTypeon the model controller
cc-type property is optional. If its value is defined on the scope, the card number will be checked against that type in addition to the Luhh algorithm. A special validity key—
ccNumberType—indicates whether the card matched the specified type. If no type is provided,
ccNumberType will always be valid for any card that passes Luhn and matches any card type.
You can also enable eager card type detection to match against card type with only leading digits (e.g. a
4 can immediately be detected as a Visa). Add the
cc-eager-type attribute to your element to enable eager type detection. The eagerly matched type will be available as
$ccEagerType on the model controller.
Displaying the card type from a user input:
Enforcing a specific card type chosen with a
- Validates the CVC
You can optionally specify a scope property that stores the card type as
cc-type. For American Express cards, a 4 digit CVC is expected. For all other card types, 3 digits are expected.
- Validates the month
- Converts it to a number
- Converts the year to a 4 digit number (
- Validates the year
- Validates that the expiration year has not passed
Validates that the month/year pair has not passed
cc-exp-year should both be placed on
input elements with
type="text" or no
type attribute. The browser's normal maxlength behavior (preventing input after the specified number of characters and truncating pasted text to that length) does not work with
type="number". Both directives will handle parsing the date components into numbers internally.
cc-exp must be placed on a parent element of
ccExp is not an input and adds a validation property directly to the form, you cannot access its validity as
myForm.ccExp.$valid. Instead use
myForm.$error.ccExp to determine whether to show a validation error.
If you're not fully familiar with form validation in Angular, these may be helpful: * Angular Documentation: Forms * Angular Form Validation (Scotch.io) * Form validation with AngularJS (ng-newsletter)
angular-credit-cards sets validity keys that match the directive names (
ccExpYear). You can use these keys or the form css classes in order to display error messages.
You can also try a live demo and experiment with various inputs and see how they're validated.