根据Angular中的另一个文本字段更改输入值

Question

这里是 Angular 的新手。我需要根据“cc_number”输入字段的第一个数字更改隐藏输入“cc_card”的值。前任。如果用户在 cc_number 中输入 5，则隐藏输入值将是“万事达卡”，如果用户输入 4，则隐藏输入值将是“Visa”等...

这是我的设置：

<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>

Answer 1

我知道这是一个老问题。我将添加 Angular 12 的答案。

假设您有以下 2 个输入字段：

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

假设您需要使用 firstName 字段的值自动填充 companyName，因此，您需要在 firstName 输入字段中添加更改事件。

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

然后，在 component.ts 文件中使用 patchValue 方法。 假设表单组名为RegisterForm

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

如果需要使用split()等字符串函数，则需要进行如下操作：

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

这是因为this.RegisterForm.get('firstName')?.value的值类型是any，如果对any类型的值使用split()方法会报错

Answer 2

  <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>

Answer 3

您可以做的是将ngModel 添加到隐藏输入中，并在#cc_number 输入的值发生变化时更改该输入的模型。

要检测更改，请将ngChange 添加到#cc_number 并传递一个验证输入的函数。

在此示例中，我使用绑定到隐藏输入的实际值来切换信用卡中的.greyed 类。尝试将输入的值更改为 4，然后是 5 和 6，您会看到相关的信用卡名称可见，根据到输入的值。

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>

附带说明 - 如果您实际上要处理和存储信用卡号码，则必须确保您是符合 PCI 标准的托管服务提供商。