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。

什么是正确的方法？

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

如何使用无角形式的反应形式控件来格式化输入？

1 个答案: