title: Angular 2 reactive forms - piping a value from a formControlName
body: <p>Using Angular 2, I have a parameter called "example" that is a Date object. In the template I want to format "example" with a date pipe. Something like this:</p>
  
  <pre><code>&lt;input type="text" [value]="example | date:'shortTime'"&gt;
  // 9:00 AM 
  </code></pre>
  
  <p>However, I need to use Angular's reactive forms. FormControls take precedent, so <code>formControlName</code> will override anything in the <code>value</code> directive.</p>
  
  <pre><code>&lt;input type="text" formControlName="example"&gt;
  // Wed Mar 08 2017 09:00:00 GMT-0700 (MST)
  
  &lt;input type="text" formControlName="example" [value]="example | date:'shortTime'"&gt;
  // Wed Mar 08 2017 09:00:00 GMT-0700 (MST)
  </code></pre>
  
  <p>The <code>formControlName</code> directive will not accept pipes. How can I format a Date object in the template of a reactive form?</p>
  
  <p>Pseudo-code:</p>
  
  <pre><code>@Component({
      template: `
          &lt;form [formGroup]="formGroup"&gt;
              Example: &lt;input type="text" formControlName="example"&gt;
          &lt;/form&gt;
      `
  })
  
  export class ExampleComponent implements OnInit {
      public formGroup: FormGroup;
      public example: Date = new Date();
  
      public ngOnInit() {
          this.formGroup = new FormGroup({
              example: new FormControl(this.example)
          });
      }
  }
  </code></pre>