1

I am using angular-credit-cards to create a credit card form. The credit card number has the following setup:

<!--... form stuff ...-->
<div class="form-group" ng-class="{'has-success': donationForm.ccNumber.$valid}">
  <label for="ccNumber">Credit Card Number</label>
  <div class="input-group">
    <input type="text" class="form-control" name="ccNumber" ng-model="credit_card.number" cc-number cc-eager-type/>
    <div class="input-group-addon">{{donationForm.ccNumber.$ccEagerType}}</div>
  </div>
</div>
<!--... more form stuff ...-->

When this form is submitted, it calls a function that creates a Paypal payment. Paypal payments need a credit card type. angular-credit-cards determines the credit card type dynamically based on the input that the cc-number directive is a part of and stores it in the input's $ccEagerType. However, how do I get this data from the input and hand it to the controller?

I tried the following:

<input type="hidden" ng-model="credit_card.type" ng-value="donationForm.ccNumber.$ccEagerType"/>

But donationForm.ccNumber.$ccEagerType is not being binded to credit_card.type.

Thanks in advance.

DrEvans
  • 65
  • 5

2 Answers2

2

Reading readme.md of that github project we find this:

The eagerly matched type will be available as $ccEagerType on the model controller.

You can get access to it in your parent controller via form name and input name:

$scope.donationForm.ccNumber.$ccEagerType

In your case ccNumber is the input name. donationForm is an inferred name of the form although you haven't posted it in your code.

Ben Drucker requires ngModelController in his custom directive ccNumber. Read AngularJS documentation about ngModelController about how to handle it being modified from inside a directive.

EDIT: (from the author of angular-credit-cards)

I'd recommend avoiding the use of a hidden input. You're much better off explicitly adding the value to your request body to PayPal explicitly rather than implicitly binding it.

Also, you should consider using $ccType for full cards. Eager typing is intended for displaying issuer logos or other UI features. $ccType matches a stricter regex for the full card number. It's possible to achieve a state where $ccEagerType is defined but the <input/> is invalid and therefore $ccType is undefined.

Kirill Slatin
  • 6,085
  • 3
  • 18
  • 38
  • I saw that, but perhaps I'm misinterpreting what that means. Does that mean that I can 'import' $ccEagerType similar to $scope, $resource, etc? So my controller would look like: `app.controller('MyController', ['$scope', '$resource', '$ccEagerType',..., function ($scope, $resource, $ccEagerType, ...) {...};` When I do that, I get a $injector:unpr error. Sorry... AngularJS noob here. – DrEvans Apr 07 '15 at 07:57
  • 1
    I understand this as simply as `$scope.$ccEagerType` inside your `MyController`. If it is the one that wraps that directive. Btw, there is an example of showing card type in that README.md. Isn't it what you're trying to achieve? – Kirill Slatin Apr 07 '15 at 08:03
  • Unfortunately I'm not seeing $ccEagerType under $scope when I check the debugger in my form submit function. I'll try posting an issue on the github repo. – DrEvans Apr 07 '15 at 08:10
  • I am not sure there is an issue – Kirill Slatin Apr 07 '15 at 08:14
  • 1
    Author of angular-credit-cards here. Kirill's answer is correct. The type is available as `$scope.donationForm.ccNumber.$ccEagerType`. I'd recommend avoiding the use of a hidden input. You're much better off explicitly adding the value to your request body to PayPal explicitly rather than implicitly binding it. – Ben Drucker Apr 07 '15 at 10:46
  • 1
    Also, you should consider using `$ccType` for full cards. Eager typing is intended for displaying issuer logos or other UI features. `$ccType` matches a stricter regex for the full card number. It's possible to achieve a state where `$ccEagerType` is defined but the `` is invalid and therefore `$ccType` is `undefined`. – Ben Drucker Apr 07 '15 at 10:49
  • Revisited this issue and found out there was an error forming the form on my end. Thank you for all the help, it now works. +1's to all. – DrEvans Apr 10 '15 at 05:02
  • Hello, I know this is a late comment but i have the same question.. and i tried the $scope.paymentForm.cardNumber.$ccEagerType in my controller but it get an error of cardName is undefined. my cardName is the name of my input text and my paymentForm is the name of the form – VLR Jun 07 '17 at 04:53
  • @VLR, what angular version are you using? can you post any relevant code? a new questioni would suit the situation best – Kirill Slatin Jun 08 '17 at 07:56
0

Seems like problem with hidden element, ng-model binding doesn't work with it.

Angular model binding didn't pass hidden field while posting a form

Try below code

<input type="text" style="display: none;" ng-model="credit_card.type" 
ng-value="donationForm.ccNumber.$ccEagerType"/>

Refer this SO Answer

Community
  • 1
  • 1
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Unfortunately this is not working. Perhaps it has to do with some HTML5 validation that is going on with my form? I have the novalidate attribute on the form at the moment. – DrEvans Apr 07 '15 at 08:00