Angular 12+: Is there a Simple way to apply display mask/pipe for Reactive Form?

Question

Reactive form, if user-input from keyboard is 1000000 expects to see 10,000.00. So a pipe is needed. Found a few SO posts,

not working, use .valueChanges, .valueChanges is underlined with curly braces, implemented in code below, error.
not working, use .value, .value is underlined with curly braces error too. [value]="fg.get('fcTest').value | number: '9.2-2'"
complicated, subscription to patch the value in this video.

Seems like have to add some code to subscribe for value change event, no simple way?

<form [formGroup]="fg">
    <input
        type="number"
        class="fc"
        placeholder="integer"
        formControlName="fcTest"
        id="fcTest"
        [value]="fg.get('fcTest').valueChanges |async | number: '9.2.2'"
    />
</form>

fg: FormGroup;
    
constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
        fcTest: ['', [Validators.required]]
    });
}

Can you explain or demo what is not working, e.g. with the solution 2? — Vega, Jun 24 '22 at 03:26
@Vega `error TS2531: Object is possibly 'null'.` with `value` underlined in red curly line. — Jeb50, Jun 24 '22 at 15:15
On which line is the error? probably you need to insert ? before ., like object?.property — Vega, Jun 24 '22 at 15:17
@Vega solution 2, `[value]="fg.get('fcTest').value | number: '9.2-2'">`, the `.value` is underlined. — Jeb50, Jun 24 '22 at 15:21
Test plase [value]="fg.get('fcTest')?.value | number: '9.2-2'"> — Vega, Jun 24 '22 at 15:23
@Vega Works! Would you post an answer so I can accept it? Thank you. — Jeb50, Jun 24 '22 at 15:36

H3AR7B3A7 · Answer 1 · 2022-06-25T02:50:28.663

In the Video

I think what is shown in the video is actually a rather clean and elegant solution:

ngOnInit() {
  this.fg.valueChanges.subscribe(form => {
    this.fg.patchValue({
      money: this.currencyPipe.transform(form.money.replace(/\D/g, '').replace(/^0+/, ''), 'EUR', 'symbol', '1.0-0')
    }, {emitEvent: false})
  })
}

Minor Simplification

You can avoid having to subscribe to valueChanges in the OnInit by binding an event in the template:

<form [formGroup]="fg">
    <input
      (keyup)="onChange()"
      type="text"
      class="money"
      placeholder="€"
      formControlName="money"
      id="money"
    />
</form>

And what onChange() would look like:

onChange() {
  this.fg.patchValue({
    money: this.currencyPipe.transform(this.fg.value.money.replace(/\D/g, '').replace(/^0+/, ''), 'EUR', 'symbol', '1.0-0')
  }, {emitEvent: false})
}

Here is the above example in a Stackblitz.

Drenai · Answer 2 · 2022-06-24T16:19:33.187

1

If your attempt with [value]="fg.get('fcTest').value | number: '9.2-2'" is giving errors in the IDE, try moving part of it to a function and use typings e.g

// template
[value]="fcTestValue | number: '9.2-2'"

// component
get fcTestValue(): string {
   return (this.fc.get('fcTest')?.value || '') as string;
}

edited Jun 24 '22 at 16:19

answered Jun 24 '22 at 06:11

Drenai

11,315
9
48
82

HTML: `[value]="fcTest.value | number: '9.2-2'"` got _error TS2339: Property 'value' does not exist on type 'string'._ with .value underlined. TS: `get fcTest(): string { return this.fg.get('fcTest').value as string;}` got _Error occurs in the template of comonent_ – Jeb50 Jun 24 '22 at 15:28
Oh, i made a mistake there - I'll update – Drenai Jun 24 '22 at 16:18

Vega · Accepted Answer · 2022-06-27T17:53:44.853

All three quoted solutions should work, however the error you invoke says that the control is undefined or comes null as of data, so value property cannot be applied to null. It is accessing the property of null, which obviously a reason to throw an error. You can either type define the control, either, going by shortcut way, use optional chaining operator (?.)

[value]="fg.get('fcTest')?.value | number: '9.2-2'"

One other solution could be:

@input #fcTest
    ...
    
    [value]="fcTest.value | number: '9.2.2'" >

Angular 12+: Is there a Simple way to apply display mask/pipe for Reactive Form?

3 Answers3

In the Video

Minor Simplification