自動格式表格輸入字段值模糊

我在窗體中有一個數字輸入字段。如果用戶離開字段，那麼當用戶沒有輸入任何數字時，該值應該自動附加兩個零數字。自動格式表格輸入字段值模糊

實例：

用戶輸入「1」 - >的值應成爲1.00。
用戶輸入「1.12」 - >該值不應該改變。

我該如何使用反應形式實現這個角度？

示例代碼：

<md-input-container> 
     <input mdInput type="number" placeholder="Number" formControlName="amount" step="any"/> 
</md-input-container> 

this.formBuilder.group({ 
     amount: [this._formData.amount, [Validators.required]], 
})

來源

2017-06-21 Gambo

您可以通過添加一個函數，它的數量和格式，它這樣做。

format(amt){ 
    if(amt % 1 == 0){ 
     amt = amt + '.00'; 
     this.amount = amt; 
    } 
    }

另外，採取在考慮的是，如果用戶聚焦回到同一字段，這些添加的」 0.00' 需要被去除。所以，當focus被觸發時，我添加了以下功能。

remove(amt){ 
    if(amt % 1 == 0){ 
     this.amount = amt * 1;; 
    } 
    }

HTML：

<md-input-container class="example-full-width"> 
    <input mdInput placeholder="Amount" type="number" [(ngModel)]="amount" formControlName="amount" (blur)="format(amount)" (focus)="remove(amount)"> 
    </md-input-container>

Plnkr demo

來源

2017-06-21 21:13:13 Nehal

自動格式表格輸入字段值模糊

回答

相關問題