Как отформатировать ввод с контролем реактивной формы в угловых?

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 пример