如何在 Angular 7 中键入数字的输入字段中添加/限制 2 位小数 .00

Question

Angular 7 - 我正在尝试将.00添加到输入字段中，此字段仅限于接受数字并且工作正常，但是，我希望能够在用户导航到表单中的其他字段后立即在同一个可编辑的输入字段中添加.00。我已经添加了管道，但它无法加载。我已经添加了接近尾声但方法无法触发，一些堆栈溢出文章建议创建自定义指令，但不确定这是否是正确的方法，根据下面的代码片段，可以有人建议一种方法，任何帮助将不胜感激。[(ngModel)]="appform.budgetvalue | number: '1.2-2'"(change)="addDecimal($event)"<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>

Answer 1

我能想到的几种方法：

<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');

  }

}

需要注意的是，转换管道会返回一个字符串。我已经写了这个指令，我过去曾用于反应式形式或这个模板

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