forms - カスタム コントロールで値をマスクする方法

Question

入力に変換された値 (例: "1(234)567-890") を表示し、値を変換していない ('1234567890') 方法は?

maskInputElとの別々の値を作成することは可能maskInputですか?

私はテンプレートを持っています:

   <input #maskInputEl class="spacer" [type]="type"
   [formControl]="maskInput"/>

カスタム コンポーネント:

export class MaskInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
    @ViewChild('maskInputEl') public maskInputEl: ElementRef;

    @Input() public mask: any[];

    public maskInput = new FormControl();

    private _oldValue: string = '';

    public ngOnInit(): void {
        this.maskInput.valueChanges
            .subscribe((value: string) => {
                    let valid = this.isValidValueByMask(value, this.mask);
                    if (valid) {
                        this._oldValue = value;
                    } else {
                        value = this._oldValue;
                    }

                    this._onChangeCallback(value);
                    this.onChange.emit(value);

                    this.maskInputEl.nativeElement.value = value; 
                },
                (err) => console.warn(err)
            );
    }

    public toggleActive(value) {
        //
    }

    public registerOnChange(fn: any): void {
        this._onChangeCallback = fn;
    }

    public registerOnTouched(fn: any): void {
        this._onTouchedCallback = fn;
    }

    public _onChangeCallback: Function = (_: any) => {
        //
    }

    public _onTouchedCallback: Function = (_: any) => {
        //
    }

    public makeActive() {
        this.maskInputEl.nativeElement.focus();
    }

    public writeValue(value: string): void {
        this.maskInput.setValue(value);
    }

    public ngOnDestroy(): void {
        //
    }

    private isValidValueByMask(value: string, mask: RegExp[]): boolean {
        //
    }
}