如何用角度的反应形式控制格式化输入？答案

【问题标题】：How to format input with reactive form control in angular?如何用角度的反应形式控制格式化输入？
【发布时间】：2019-05-17 16:08:46
【问题描述】：

我有一个像下面这样的输入，带有一个响应式表单控件：

  <mat-form-field appearance="fill" floatLabel="always" fxFlex>
    <mat-label>My field</mat-label>
    <input
      matInput
      #input="matInput"
      [formControl]="amountControl"
      [errorStateMatcher]="customMatcher"
    />
    <mat-error *ngIf="amountControl?.invalid">{{ getErrorMessage$() | async }}</mat-error>
  </mat-form-field>

现在，在用户输入一个值后，需要对该值进行格式化，可能是在模糊或自定义键盘快捷键上，填充回 html 输入字段，并使用格式化的值更新到有界表单控件中。

我正在考虑使用管道，但是，它似乎只用于更改值的显示方式，而不是将其保存回支持 formControl。

这样做的正确方法是什么？

【问题讨论】：

标签： angular format angular-reactive-forms

【解决方案1】：

我会这样做：
HTML：

<input
          matInput
          #input="matInput"
          [formControl]="amountControl"
          [errorStateMatcher]="customMatcher"
          (blur) = "transform()"
 />

TS：

  amountControl = new FormControl('');
  transform(){
    let transformValue = this.amountControl.value - 5; // your pipe here
    this.amountControl.setValue(transformValue);
  }

值会随着你输入而改变，但是在模糊时会发生变换，如果你想让值只在模糊时改变，你可以使用这个：

amountControl = new FormControl('', {updateOn: 'blur'});

编辑：StackBlitz 示例

【讨论】：