title: How to display formatted value as user types, but send the raw value to the Angular 4 formControl for validation and the formControl value?
body: <p>I am new to Angular2/4.</p>
  
  <p>I have an input field with formControlName = "Price", and I need the input value to be displayed in the correct currency format as the user types. When user types '100000', I need it to be displayed as 'Rp100,000' but the raw value should be sent as it is to the FormControl value.</p>
  
  <p>I have tried sth like this:</p>
  
  <pre><code>import { Directive, ElementRef, HostListener } from '@angular/core';
  import { CurrencyPipe } from '@angular/common';
  import { NgControl } from '@angular/forms';
  
  @Directive({
    selector: '[appPriceInput]'
  })
  export class PriceInputDirective {
    constructor(private el: ElementRef, private control: NgControl) {}
  
    @HostListener('ngModelChange')
    onValueChange($event) {
      let value = this.el.nativeElement.value;
  
      if (value.toLowerCase().indexOf('rp') !== -1) {
        value = this.onRemoveCurrencyPipe(this.el.nativeElement.value);
      }
  
      const formattedValue = new CurrencyPipe('en').transform(value, 'IDR', 'symbol-narrow', '1.0-0');
      this.control.valueAccessor.writeValue(formattedValue);
    }
  
    @HostListener('blur')
    onBlur($event) {
      const rawValue = this.onRemoveCurrencyPipe(this.el.nativeElement.value);
      this.control.viewToModelUpdate(rawValue);
    }
  
    onRemoveCurrencyPipe(data) {
      return data
        .substr(2, data.length)
        .split(',')
        .join('');
    }
  }
  </code></pre>
  
  <p>Here's the form group and the validations. The price should only be a string of number.</p>
  
  <pre><code>createMedicineForm() {
      this.medicineForm = this.fb.group({
        medicineName: ['', Validators.required],
        quantity: [1, [Validators.required, Validators.pattern('^[0-9]*$'), Validators.min(1)]],
        unit: ['tablet', Validators.required],
        price: [null, [Validators.required, Validators.pattern('^[0-9]*$')]],
        medicineId: ''
      });
    }
  </code></pre>
  
  <p>But the result is still wrong. It seems like the problem here is the wrong implementation of <code>this.control.valueAccessor.writeValue(formattedValue)</code> and <code>this.control.viewToModelUpdate()</code>.</p>
  
  <p>Anyone have any idea of the correct implementation?</p>
  
  <p>Thank you.</p>