时间戳

首页 > 解决方案 > 如何在Angular 7的数字类型输入字段中添加/限制2个小数.00

javascript - 如何在Angular 7的数字类型输入字段中添加/限制2个小数.00

问题描述

Angular 7 - 我正在尝试将 .00 添加到输入字段，该字段仅限于接受数字并且效果很好，但是，我希望能够尽快在同一个可编辑输入字段中添加 .00当用户导航到表单中的不同字段时。我添加了管道，[(ngModel)]="appform.budgetvalue | number: '1.2-2'"但无法加载。我已经添加(change)="addDecimal($event)"到接近尾声但该方法无法触发，一些stackoverflow文章建议创建一个自定义指令但不确定这是否是正确的方法，根据下面的代码片段可以请一些建议一种方法，任何帮助都会非常高赞赏。

<div class="col-md-8">
  <div class="form-group col-lg-6"
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input name="budgetvalue" class="form-control" required digitOnly
        decimal="true" decimalSeparator="." decimalDigitLimit="2" placeholder="0.00"
        pattern="[0-9]+([.][0-9]+)?" isValidMoney
        [(ngModel)]="appform.budgetvalue" #budgetvalue="ngModel">
    </div>
    <div *ngIf="(budgetvalue.touched)">
      <div *ngIf="!budgetvalue?.valid">
        <small class="text-danger">Please provide valid budget amount</small>
      </div>
    </div>

标签： javascriptangularjsangulartypescript

解决方案

我能想到的几种方法：

<input name="" ... (blur)="transform()" />
...
import { Component } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private decimalPipe: DecimalPipe) {}

  decimal = "0";

  transform() {
    this.decimal = this.decimalPipe.transform(this.decimal, '1.2-2');
  }
}

一个警告是转换管道返回一个字符串。我已经写了这个指令，我过去用过响应式表单，或者这个指令用于模板

  1. <input [value]="appform.budgetvalue | number: '1.2-2'"/>- 然而，这可能不会按您期望的方式工作，但可能会给您一些想法

推荐阅读