Ng模型和iOS信用卡扫描

Question

Ng-model and iOS credit card scanning

I have a credit card form. Each field looks something like this:

<input type=“text” ng-model = “cc.number”, ng-class = validClass('cc.number’)>

The validClass function returns valid or invalid , and it used for as-you-type validation. It all works great- if you type a credit card that's too long, or doesn't pass Luhn validation, it lights up red.

When you hit 'submit', the code does credit card stuff with the values of cc.number , cc.securityCode , cc.month , and cc.year .

The problem comes when you use iOS's credit card scanner . It's a feature that, when you click on a credit card field on a website, lets you use your phone's camera to scan your credit card. It then parses that photo and puts the credit card number + expiration date into the form. It's pretty cool.

However, when iOS safari does this, it doesn't seem to trigger ng-model to update. The validClass function output doesn't change based on the new input. Worse yet, when the user submits the form, the updated value of cc-number doesn't appear to have changed.

It's frustratingly hard to debug this issue since this scanning feature isn't available on the iOS simulator. It's also not available on a real iPhone when I point it to a local network address (eg, my laptop). It appears to only show up as an option on https sites, which makes it really hard to debug.

TLDR: iOS Safari's “scan credit card” feature doesn't update ng-model variables. Does anyone have a good way to fix or work around this?

Answer 1

As a workaround you can update the model when the user submits the form. You will need to name the form and the cc-number input so that you can refer to them from the scope.

<form name='creditCardForm'>
  <input name='cardNumber' ...>

Inside your submit handler ...

var cardNumber = $('[name="cardNumber"]').val()
$scope.creditCardForm.cardNumber.$setViewValue(cardNumber);

This will update the model and set the validity allowing you to cancel submission if its invalid.

if ($scope.creditCardForm.cardNumber.$invalid) {
  // cancel submit...