How to use pipes in Angular 5 reactive form input : <p>I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format.  I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe.  My pipe name is 'udpCurrency'</p>

<p>The closest answer I could find on stack overflow was this one: <a href="https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular2-view">Using Pipes within ngModel on INPUT Elements in Angular2-View</a> However this is not working in my case and I suspect it has something to do with the fact that my form is reactive</p>

<p>Here is all the relevant code:</p>

<p><strong>The Template</strong></p>

<pre><code>&lt;form [formGroup]="myForm" #f="ngForm"&gt;
  &lt;input class="form-control col-md-6" 
    formControlName="amount" 
    [ngModel]="f.value.amount | udpCurrency" 
    (ngModelChange)="f.value.amount=$event" 
    placeholder="Amount"&gt;
&lt;/form&gt;
</code></pre>

<p><strong>The component</strong></p>

<pre><code>import { Component, OnInit, HostListener } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(
    private builder: FormBuilder
  ) {
    this.myForm = builder.group({
      amount: ['', Validators.required]
    });
  }    
}
</code></pre>

<p><strong>The error:</strong></p>

<pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: '. Current value: 'undefined: undefined'
</code></pre>
