自動フォーマットフォーム入力フィールド値がぼかしである場合

Question

フォームに数値入力フィールドがあります。ユーザーがフィールドを離れると、ユーザーが数字を入力しなかったときに値が2桁の0桁を自動的に付加します。

例：

• ユーザが "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]], 
}) 

Answer 1

あなたは数や形式、それにかかる機能を追加することによってそれを行うことができます。

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

また、ユーザーが同じフィールドにフォーカスしている場合は、追加された '.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