Question

我在表单中有一个数字输入字段。如果用户离开该字段，则当用户未输入任何数字时，该值应自动附加两个零数字。

示例：

用户输入＆＃34; 1＆＃34; - ＆GT;该值应为1.00。
用户输入＆＃34; 1.12＆＃34; - ＆GT;价值不应该改变。

我如何使用反应形式实现角色？

示例代码：

<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

模糊的自动格式表单输入字段值

1 个答案: