如何顯示一個值並在FormControl中保存另一個值？

Question

我正在使用text-mask lib，它工作得很好。

考慮的以下配置掩蓋：

priceMask = Object.freeze({ 
    mask: createNumberMask({ 
    allowDecimal: true, 
    decimalSymbol: ',', 
    integerLimit: 7, 
    prefix: '', 
    thousandsSeparatorSymbol: '.' 
    }) 
}); 

在我的HTML，我有以下幾點：

<form [formGroup]="formGroup"> 
    <input type="text" 
     formControlName="maskedInput" 
     [textMask]="priceMask"> 
</form> 

正如你可能已經注意到了，在我的面具配置我限制一個字段有這樣一個值：

9.999.999,99

然而，當我想顯示此特定格式的用戶，我想在我的control得到不同的值，是這樣的：

9999999,99

這可能嗎？

我希望問題很清楚。謝謝。

這是我創建的plnkr以說明情況。

Answer 1

我會爲此創建指令：

@Directive({ 
    selector: '[numeric]' 
}) 

export class NumericDirective { 

    constructor(private model: NgControl) { } 

    @HostListener('input') inputChange() { 
    const newValue = this.model.value.replace(/\./g, ''); 
    this.model.control.setValue(newValue); 
    this.model.valueAccessor.writeValue(newValue); 
    }  
} 

而在HTML，只是包括numeric屬性：

<form [formGroup]="formGroup"> 
    <input type="text" 
     formControlName="maskedInput" 
     [textMask]="priceMask" 
     numeric> 
</form> 

DEMO