title: Angular 4 Reactive Form - Value for display
body: <p>I'm using reactive form approach. I have input field which have correspondent formControl Object and while typing I'm doing formatting on the value - make all the input uppercase.</p>
  
  <p>That of course works good - the value is updated in the view and in formControl as well. </p>
  
  <p>The issue is That I would like to send to server the original value and not the formmated value (uppercase)</p>
  
  <p>So I need something like value, and value for display in the formControl object.</p>
  
  <p>See plunker - <a href="http://plnkr.co/edit/PYsVj3ItRTmNIuDalXWf?p=preview" rel="noreferrer">formatting value formControl</a></p>
  
  <p>template:</p>
  
  <pre><code>  &lt;input type="text" 
           class="form-control" 
           (blur)="handleOnBlur($event)"
           (input)="onChange($event)"
           formControlName="name"&gt;
  </code></pre>
  
  <p>model:</p>
  
  <pre><code>    valueForModel: string; 
      valueForDisplay: string;
      public myForm: FormGroup;        
  
   onChange(event) {
      const value = event.target.value;
      this.valueForModel = value;
      this.valueForDisplay = value.toUpperCase();
  
      event.target.value = this.valueForDisplay;
   }
  
   handleOnBlur(event) {
  
     consol.log(this.valueForModel);
      // Herer I'm calling the sever and the server actually works good
      // server return back the updated value - but it then override my value 
         in the dom
      // the value for display value    
     }
  
   ngOnInit() {
  
       this.myForm = this._fb.group({
          name: ['', [&lt;any&gt;Validators.required, 
              &lt;any&gt;Validators.minLength(5)]],
        });
    }
  </code></pre>
  
  <p>Can't find anything to help.
  any suggestion will be appreciated.</p>