Angular 管道或指令：获取输入字段的实际值而不是管道或指令的修改值

Question

我创建了一个自定义管道，它将输入值替换为星号，并在代码

下方的 4 个字符之间添加了 space

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'creditCard'
})
export class CreditCardPipe implements PipeTransform {

  transform(value: any) {
    if (value === undefined) {
      return value;
    }
    const s = value.replace(/\s+/g, '').replace(/([\w*]{4})/g,' ').trim();
    return s.replace(/\w/g, '*');
  }

}

我已将此管道应用到输入字段 (formcontrol) 并且它按预期工作，但是如果我尝试获取该字段的值，则会出现星号。

  <input name="creditcardnumber" formControlName="creditCardNumber"
                      [value]="totalDueNewCardForm.get('creditCardNumber').value | creditCard"
                      type="text" appNumbersOnly required />

有什么方法可以得到 formcontrol 的真实值而不是管道值。

尝试了另一种方法来实现指令

我创建了一个自定义指令，它将输入值替换为星号，并在代码下方的 4 个字符之间添加了 space

import { Directive, ElementRef, HostListener } from '@angular/core';
import {NgControl} from '@angular/forms';

@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {

  private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);

  private specialKeys: Array<string> = ['Backspace', 'Tab'];


  constructor(private el: ElementRef, private model: NgControl) {
  }
  @HostListener('input', ['$event'])
  inputChange(event: any) {
    debugger;

    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
       this.model.control.setValue(event.target.value.replace(/\s+/g, '').replace(/([\w*]{4})/g,' ').trim().replace(/\w/g,'*'));
         }
}

我已将此指令应用于输入字段 (formcontrol)，它按预期工作，但如果我尝试获取该字段的值，则会出现星号。

<input type="text" formControlName="firstName" required appNumbersOnly>

有什么方法可以更改外观并使 formcontrol 值保持原样。或任何其他解决方案

Answer 1

检查一下。

import { Component,Pipe, PipeTransform } from '@angular/core';
import { FormGroup,FormControl,FormBuilder, AbstractControl } from '@angular/forms';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      formGroup: FormGroup;
      creditCardNumber: FormControl = new FormControl();

      value = 12312312312321;

       getValueFromInput(){
        console.log(this.formGroup.get('credit').value)
      }

      constructor(
        private _fb: FormBuilder
      ) {

      }
      ngOnInit(){
        this.formGroup = this._fb.group({
          credit: ['123123']
        });  }
    }

在 HTML

<form [formGroup]="formGroup">
  <input name="creditcardnumber" formControlName="creditCardNumber" 
  [value]="formGroup.get('credit').value | creditCard"
  type="text"  />
</form>

 <button (click)="getValueFromInput()">View</button>

Answer 2

您的示例代码始终会将信用卡号转换为星号。

您可以考虑编写指令 credit-card-mask 或使用 angular-ui-mask https://github.com/angular-ui/ui-mask

Answer 3

请你检查例子

https://stackblitz.com/edit/angular-8-app-example-g1xn3v

Angular 管道或指令：获取输入字段的实际值而不是管道或指令的修改值

Angular Pipe or Directive: Get real value of Input field instead of modified value from pipe or directive

angular-directive

angular-pipe

angular