title: Angular reactive form having the old value on (change) event callback
body: <p>Consider an Angular reactive form with an input. Whenever the input changes, we want to keep its old value and display it some where. the following code does it as displayed:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent {
    name = 'Reactive Form';
    changedValue;
    oldValue;
    ooldValue;
    rform = new FormGroup({
      inputOne: new FormControl('chang me')
    });
  
  
    onOneChange(event) {
      this.changedValue = event.target.value;
      console.log('oneChanged', this.changedValue, 'old value is', this.oldValue);
      this.ooldValue = this.oldValue;
      setTimeout( ()=&gt;this.oldValue = this.changedValue, 1);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="rform"&gt;
      &lt;label&gt;
        One:
        &lt;input formControlName="inputOne" (change)="onOneChange($event)"/&gt;
      &lt;/label&gt;
    &lt;/form&gt;
    &lt;p&gt;
      changed value: {{changedValue}}
    &lt;/p&gt;
    &lt;p&gt;
          old value: {{ooldValue}}
    &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see it has been addressed by keeping three variables in the code which is not desirable (Yes the <code>changedValue</code> variable can be removed, but still two variables to keep the old value is annoying, isn't it?).</p>
  
  <p>Is there any way to rewrite the code with less variables? Does Angular itself has a descent way to do that?</p>
  
  <p>You can find the code <a href="https://stackblitz.com/edit/angular-u5gxgl" rel="nofollow noreferrer">here</a></p>