How to format input with reactive form control in angular?

Question

I have an input like below, bounded with a reactive form control:

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

Now, after the user enters a value, the value needs to be formatted, possibly on blur or custom keyboard shortcut, filled back into the html input field, and updated into the bounded form control with the formatted value.

I was thinking of using pipes, but then, it seems to be useful only to change how a value is displayed, but not save it back to the backing formControl.

What would be the correct approach to do this?

Ala A. · Accepted Answer · 2019-05-17 08:08:46Z

3

I would do it this way:
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);
  }

The value will change as you type, but transformation will occur on blur, if you want the value to change only on blur, you can use this:

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

EDIT: StackBlitz example

answered May 17, 2019 at 8:08

Ala A.

2,34526 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to format input with reactive form control in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related