change input value based on another text field in Angular

Issue

New to Angular here. I need to change the value of my hidden input 'cc_card' based on the first digit of the 'cc_number' input field. Ex. If a user types 5 in cc_number the hidden inputs value will be 'MasterCard', if a user types a 4 the hidden inputs value will be 'Visa' etc...

Here is my setup:

<div ng-app="" ng-init="prefixes={visa: '4', mastercard:'5', amex:'3', discover:'6'}" style="margin-bottom:25px;">    
    <div>
        <h1>Payment details</h1>
    </div>

    <div>   
        <input name="cc_number" class="text-box" type="text" id="cc_number" value="" size="30" maxlength="30" required="required" placeholder="Credit card number" ng-model="prefixes.cards">
        <input type="hidden"  name="cc_card" id="cc_card" value="" />
    </div>

    <div>
    <div>
        <img id="visa" src="images/visa-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '4'}" />
    </div>
    <div>
        <img id="mastercard" src="images/master-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '5'}"  />
    </div>
    <div>
        <img id="amex" src="images/amex-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '3'}"  />
    </div>
    <div>
        <img id="discover" src="images/discover-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '6'}"  />
    </div>
</div>

Solution

What you can do is to add ngModel to the hidden input and change the model of that input when the value of #cc_number input changes.

To detect the change you add ngChange to #cc_number and pass a function that will validate the input.

In this example I'm using the actual value that is bound to the hidden input to toggle the .greyed class from the credit cards. Try changing the value of the input to 4, then 5 and 6 and you'll see that the relevant credit card name get visible, according to the value of the input.

angular.module('app',[]).controller('ctrl', function($scope) {

  $scope.prefixes = {};
  $scope.ccNumberChnage = function() {
    var ccType = $scope.prefixes.cards ? $scope.prefixes.cards.charAt(0) : '';
    switch(ccType) {
      case '4': $scope.prefixes.type = 'mastercard'; break;
      case '5': $scope.prefixes.type = 'amex'; break;
      case '6': $scope.prefixes.type = 'discover'; break;
      default: $scope.prefixes.type = null; break;
    }
  };

});

.greyed {background:rgba(0,0,0,.5);}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-init="prefixes={visa: '4', mastercard:'5', amex:'3', discover:'6'}" style="margin-bottom:25px;">    
    <div>
        <h1>Payment details</h1>
    </div>

    <div>   
        <input name="cc_number" class="text-box" type="text" id="cc_number" value="" size="30" maxlength="30" required="required" placeholder="Credit card number" ng-model="prefixes.cards" ng-change="ccNumberChnage()">
        <input type="hidden" ng-model="prefixes.type" name="cc_card" id="cc_card" value="" />
    </div>

 
   
    <div id="mastercard" ng-class="{'greyed' : prefixes.type !== 'mastercard'}">mastercard</div>
    <div id="amex" ng-class="{'greyed' : prefixes.type !== 'amex'}">discover</div>
    <div id="discover" ng-class="{'greyed' : prefixes.type !== 'discover'}">discover</div>
</div>

As a sidenote - If you're actually going to process and store credit card numbers you must make sure that you're a PCI compliant hosting provider.

Answered By - Alon Eitan