反应形式的 DecimalFormat（带实时计算）

Question

我有以下编辑组件，其中 amount * price 结果是 worth

HTML:

<mat-form-field appearance="fill">
    <mat-label>Menge</mat-label>
    <input formControlName="new_unit_amount" type="number" (change)="calculateWorth()" matInput required />
</mat-form-field>

<mat-form-field appearance="fill">
    <mat-label>Stückpreis (EUR)</mat-label>
    <input formControlName="new_unit_price" type="number" (change)="calculateWorth()" matInput />
</mat-form-field>

<mat-form-field appearance="fill">
    <mat-label>Wert (EUR)</mat-label>
    <input formControlName="new_unit_worth" type="number" matInput />
</mat-form-field>

TS:

this.formGroup = this.formBuilder.group({
    new_unit_amount: new FormControl(this.currentUnit.unit_amount, [Validators.required]),
    new_unit_price: new FormControl(this.currentUnit.unit_price),
    new_unit_worth: new FormControl({ value: (this.currentUnit.unit_amount * this.currentUnit.unit_price), disabled: true })
});

calculateWorth(): void {
    if (this.formGroup.get('new_unit_price').value === null && this.formGroup.get('new_unit_amount').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        })
    } else if (this.formGroup.get('new_unit_price').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        })
    } else if (this.formGroup.get('new_unit_amount').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        })
    } else {
        this.formGroup.patchValue({
        new_unit_worth: +this.formGroup.get('new_unit_price').value * +this.formGroup.get('new_unit_amount').value
        })
    }
}

我的问题是初始值和计算值没有显示两位小数。因此，我在我的 app.module.ts 中导入了 DecimalPipe 作为提供者并尝试了这个，例如：

new_unit_price: new FormControl(this.decimalPipe.transform(this.currentUnit.unit_price, '1.0-2'))

我还尝试使用 CurrencyPipe 和网络研究中的其他示例：

new_unit_price: new FormControl(this.currencyPipe.transform(this.currentUnit.unit_price, 'de-DE', '1.0-2'))

但至少输入字段保持空白。所以我的问题是，用 2 位小数显示值的正确方法是什么。

谢谢和问候

Answer 1

您可以使用简单的 javascript toFixed 函数来解决这个问题。

parseFloat(decimalValue).toFixed(2);

this.formGroup = this.formBuilder.group({
    new_unit_amount: new FormControl(parseFloat(this.currentUnit.unit_amount).toFixed(2), [Validators.required]),
    new_unit_price: new FormControl(parseFloat(this.currentUnit.unit_price).toFixed(2)),
    new_unit_worth: new FormControl({ value: parseFloat(this.currentUnit.unit_amount * this.currentUnit.unit_price).toFixed(2), disabled: true })
});

calculateWorth(): void {
    if (this.formGroup.get('new_unit_price').value === null && this.formGroup.get('new_unit_amount').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        });
    } else if (this.formGroup.get('new_unit_price').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        });
    } else if (this.formGroup.get('new_unit_amount').value === null) {
        this.formGroup.patchValue({
        new_unit_worth: 0
        });
    } else {
        const newWorth = (parseFloat(this.formGroup.get('new_unit_price').value) * parseFloat(this.formGroup.get('new_unit_amount').value)).toFixed(2)
        this.formGroup.patchValue({
        new_unit_worth: newWorth 
        });
    }
}

反应形式的 DecimalFormat（带实时计算）

DecimalFormat in reactive forms (with live calculation)

typescript

angular

angular-reactive-forms