title: Applying a pipe or transform to a Reactive Form value
body: <p>I'm building a simple reactive form.  For simplicity, lets say the only data I want to display is a date.</p>
  
  <p><strong>test.component.html</strong></p>
  
  <pre><code>&lt;form novalidate [formGroup]="myForm"&gt;
         &lt;input type="date" formControlName="date"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>test.component.ts</strong></p>
  
  <pre><code>private date: Date = Date.now();
  ngOnInit() {
          this.myForm = this.fb.group({
              date: [this.date, [Validators.required]]
          });
      }
  </code></pre>
  
  <p>The input type=date field on the template requires the date to be in the format of 'yyyy-MM-dd'. The value in event is a JavaScript Date object.</p>
  
  <p><strong>How can I modify the data at the template level so the input value is correct?</strong>  </p>
  
  <hr>
  
  <p><strong>What I've tried:</strong></p>
  
  <p>One way to do this would be to inject the DatePipe into my component and apply the conversion in code.</p>
  
  <pre><code>date: [datePipe.transform(this.event.date, 'yyyy-MM-dd'), [Validators.required]]
  </code></pre>
  
  <p>But this ties the implementation detail of the template to the component. For example, what if a NativeScript template requires the date to be in the format <code>MM/dd/yyyy</code>? The formGroup is no longer valid.</p>