角管或指令：获取输入字段的实际值，而不是从管或指令中修改的值

Question

我创建了一个自定义管道，该管道用星号替换了输入值，并在代码下方的4个字符之间添加了空格

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,'$1 ').trim();
    return s.replace(/\w/g, '*');
  }

}

我已经将此管道应用于Input字段（formcontrol），并且按预期方式工作，但是如果我尝试获取带有星号的字段的值。

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

是否有任何方法可以获取formcontrol的实际值而不是管道值。

尝试通过指令实现此目标的另一种方法

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

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,'$1 ').trim().replace(/\w/g,'*'));
         }
}

我已将此指令应用于Input字段（formcontrol），并且按预期方式工作，但如果我尝试获取带星号的字段的值，则为该值。

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

是否有任何方法可以改变外观并保持原样的FormControl值。或任何其他解决方案]

Answer 1

请您检查示例

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

Answer 2

检查出来。

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 3

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

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