如何在Angular中使用响应式表单控件格式化输入？

Question

我有一个输入框，通过响应式表单控件进行绑定：

  <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时才有用。那么正确的方法是什么？

最初的回答：用户输入值后，您可以使用JavaScript格式化该值并将其赋值给HTML输入字段。然后，通过访问相应的FormControl，您可以将值更新回表单控件。如果您希望在用户离开该输入字段之前对其进行格式化，则可以使用事件侦听器和onblur事件来实现。

- Victor Mukherjee

Answer 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 示例

- Ala Abid