laurihy/angular-payments — pull request #4 by jribble (2013-10-31 16:54:43+00:00)
Title: Several different things - more details in description

Sorry, I should have broken this up better. I was just trying to get it to work for my needs, then decided I would try to contribute the changes back. Here are the main ideas:

## Validate on the normal Angular mechanism
The first thing I noticed when I tried to use the validators is that the timing of validation was different from all of my other fields. This was because the validators hook to onblur. I changed them validate as part of $parsers and $formatters, which is the normal Angular validation mechanism.

## Formats defined on cards
I noticed that the card definitions had a format pattern in one case, but it was hard coded into the formatter in another case. I moved the hard coded one into the card definitions so it's all controlled from the cards.

## Loading the value to/from scope
When I used the formatters I noticed that the value in the scope included the formatting. I didn't want to see it there, just in the field. Also, the form I'm using has multiple pages that share the same scope. The user can navigate back and forth between the pages. So he can go to the payments page, enter data, leave, then come back, and the data should still be there. I wanted the field to be formatted as you type, save to the scope unformatted, then load back to the field formatted again.

In order to do this I added functions to $parsers and $formatters on the field. This let me remove the formatting when parsing (field to scope) and add back the formatting when formatting (scope to field). As part of this, I made the formatter directives dependent on ngModel.

With expiry I decided to go to a 4 digit year always when formatting the value back into the field. So you enter 05/14, it saves to the scope as 05/2014, and if you leave the form and come back it will reload as 05/2014.

## Put card info onto input control as $card
I wanted to show the card type that was being detected as an image in the field, so I needed access to the card information on the scope. I did this by copying the card definition and putting it on the input control as $card. I could then use an ng-style to change the style conditionally based on card type. There is other good data there, too, but I've only used it for card type so far.

## Put card type onto scope as a model
I already had $card, but my needs here were different. I wanted to be able to specify a location on the scope where the card type should be written when the card is detected. I needed this to be different from the $card on the input because I needed this to persist even after the form went away. I added an attribute "payment-type-model" on the card validator. This is a one-way bind. The card validator will only write to this model.

I also noticed that the cvc validator had all of the code to be able to validate by card type, but didn't know the type. So I added the "payment-type-model" attribute to that, too. In this case it's a read only, and just changes the validation rules based on the card definition.

## Updated example
I updated the example to show most of these changes in action.

## Sorry
Sorry for the giant list of changes. Let me know if you have any questions.