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 {
        //
    }
}

Answer 1

是的，这是可能的。我为自己的项目做了类似的事情，我想创建一个以美分返回值的MoneyFieldComponent，但允许用户以美元和美分输入他们的货币价值。

基本概念是您的组件必须存储原始值，但是，您在文本字段中显示格式化的值。此外，当用户与您的文字字段进行互动时，您会更新您的内在价值＆＃39;具有原始值的组件。

请注意，您不应该使用ngModel更新文本字段 - ngModel有一些在这些情况下会造成严重破坏的异步行为 - 您可以使用原始javascript完成相同操作（或者在我的情况下，我使用了{{ 1}}）。

<强>示例：

FormControl

请注意，上面是该组件的简化版本。 The full version can be found on Github.

如何在自定义控件中屏蔽值

1 个答案: