Dealing with Ng-model and iOS credit card scanning
In my credit card form, each field is structured like this:
<input type=“text” ng-model = “cc.number”, ng-class = validClass('cc.number’)>
The function validClass returns either valid or invalid, providing real-time validation feedback. Everything functions properly - any incorrect input highlights in red as the user types.
Upon hitting 'submit', the code processes the values of cc.number, cc.securityCode, cc.month, and cc.year for credit card operations.
An issue arises when utilizing iOS's credit card scanner. This feature allows users to use their phone camera to scan a physical credit card and auto-populate the fields with the scanned information. However, Safari on iOS doesn't seem to trigger an update to the ng-model data, leading to discrepancies in validation handling and submitted values.
Troubleshooting this problem is complicated because the scanning feature isn't supported in the iOS simulator or when accessing a local network (e.g., a laptop). It appears to only work on secure https sites, making it challenging to diagnose.
TLDR: iOS Safari's credit card scanning feature fails to update ng-model variables accurately. Any suggestions for resolving or bypassing this issue?