Question

Ng模型和iOS信用卡扫描

我有一张信用卡表格。每个字段看起来都像这样：

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

validClass函数返回valid或invalid，用于进行类型验证。这一切都很好 - 如果你输入的信用卡太长，或者没有通过Luhn验证，它会亮起红色。

当您点击“提交”时，代码会使用cc.number，cc.securityCode，cc.month和cc.year的值来刷信用卡。

使用iOS的credit card scanner时出现问题。这是一项功能，当您点击网站上的信用卡字段时，可以使用手机的相机扫描您的信用卡。然后它会解析该照片并将信用卡号+到期日期放入表单中。这很酷。

但是，当iOS safari执行此操作时，它似乎不会触发ng-model更新。 validClass函数输出不会根据新输入而更改。更糟糕的是，当用户提交表单时，cc-number的更新值似乎没有改变。

调试此问题令人沮丧，因为iOS模拟器上没有此扫描功能。当我将它指向本地网络地址（例如，我的笔记本电脑）时，它在真正的iPhone上也不可用。它出现只显示为https网站上的一个选项，这使得它很难调试。

TLDR：iOS Safari的“扫描信用卡”功能不会更新ng-model变量。有没有人有一个很好的方法来解决或解决这个问题？

Answer 1

作为一种变通方法，您可以在用户提交表单时更新模型。您需要为表单和cc编号输入命名，以便您可以从范围中引用它们。

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

在提交处理程序中......

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

这将更新模型并设置有效性，允许您在无效时取消提交。

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