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

我已经创建了一个自定义管道，它用星号替换输入值，并在代码下面的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, '*');
  }

}

我已经将此管道应用于输入字段（formcontrol），并且它按照预期工作，但是如果我尝试获取字段的值，请获取星号

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

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

是否有任何方法可以获得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,'*'));
         }
}

从'@angular/core'导入{Directive，ElementRef，HostListener}；
从'@angular/forms'导入{NgControl}；
@指示({
选择器：“[appNumbersOnly]”
})
导出类编号仅直接{
私有regex:RegExp=newregexp（/^-？[0-9]+（\.[0-9]*）{0,1}$/g）；
private specialKeys:Array=['Backspace'，'Tab']；
构造函数（私有el:ElementRef，私有模型：NgControl）{
}
@HostListener（'输入'，['$event']））
输入更改（事件：任何）{
调试器；
if（this.specialKeys.indexOf（event.key）！=-1）{
返回；
}
this.model.control.setValue（event.target.value.replace（/\s+/g'，）.replace（/（[\w*]{4}）/g，'$1'）.trim（）.replace（/\w/g，'*'））；
}
}

我已经将此指令应用于输入字段（formcontrol），并且它按照预期工作，但是如果我尝试获取字段的值，请获取星号

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

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

是否有任何方法可以更改外观并使formcontrol值保持原样。或任何其他解决方案，请查看

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>

看法

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

---

你可以考虑写指令<代码>信用卡掩码或使用<代码>角UI掩码

< p>请检查示例

---

我不认为在服务上使用带有

值的
管道
属性可以做到这一点。你最好还是用指令来代替。看起来你应该用type=“password”来代替文本字段。@siddAjmera，我也这么想，你有类似的例子吗？@siddAjmera也尝试过使用指令。你能看看angularjs库angular中的情况吗？同意！这是Ng2的npm包