change input value based on another text field in Angular

Question

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>

You can use ngKeyup or ngKeypress to trigger a function on a key event.. then do some checking and set your hidden field — tymeJV
– tymeJV, Commented Jul 24, 2017 at 15:44
You need to add ngModel to the hidden input, and ngChange to cc_number so when the value is changed you can set a value to the hidden input from the controller — Alon Eitan
– Alon Eitan, Commented Jul 24, 2017 at 15:46
@AlonEitan Thank you. This sound about right, but again I'm very new to angular, how would I set up the ngchange? would it just call a function I create? — Steven Serrano
– Steven Serrano, Commented Jul 24, 2017 at 16:38

Alon Eitan · Accepted Answer · 2017-07-24 16:58:16Z

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.

Ahh I see what you did here. An added note, In order to populate the hidden fields value on the change I had to use ng-value. It's working as expected thank you!

Kyrolus Kamal Fahim Sous · Accepted Answer · 2021-09-22 02:38:46Z

I know it is an old question. I will add the answer for Angular 12.

suppose you have the following 2input fields:

<input type='text' value = '' name='firstName' formControlName="firstName">
<input type='text' value = '' name='companyName' formControlName="companyName">

Suppose you need to fill the companyName automatically with the value of firstName field, so, you will need to add a change event to the firstName input field.

<input type='text' value = '' name='firstName' (change)="OnInputChange()" formControlName="companyName">

Then, in the component.ts file use the patchValue method. suppose the form group is called RegisterForm

OnInputChange(){
     this.RegisterForm.patchValue({
     companyName : this.RegisterForm.get('firstName')?.value;
   })
}

If you need to use a string functions such as split(), then you need to do the following:

OnInputChange(){
      let firstName = this.RegisterForm.get('firstName')?.value;
      this.RegisterForm.patchValue({
         companyName : firstName.split();
       })
    }

this is because the value type of this.RegisterForm.get('firstName')?.value is any and you will get an error if you use split() method on a value of type any

Lekens · Accepted Answer · 2017-07-24 17:00:59Z

  <div  ng-app="appName" ng-controller="appCtrl" 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-keyup="vm.updateInput(prefixes.cards)">
             <input type="hidden"  name="cc_card" id="cc_card"  ng-model="prefixSelected"/>

         </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>
     </div>
     <script>
         var app = angular.module('appName', []);
         app.controller('appCtrl', function($scope) {
        $scope..updateInput = function(value){
        console.log('true3', value);
        // $scope.prefixes = {visa: '4', mastercard:'5', amex:'3', discover:'6'};
        switch (value){
            case '4':
                $scope.prefixSelected = 'visa';
                break;
            case '5':
                $scope.prefixSelected = 'mastercard';
                break;
            case '3':
                $scope.prefixSelected = 'amex';
                break;
            case '6':
                $scope.prefixSelected = 'discover';
                break;
            default:{
                $scope.prefixSelected = '';
                break;
            }
        }
    };
     });
     </script>

Collectives™ on Stack Overflow

change input value based on another text field in Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related