reference img in Angular2 form with typescript
<p>I am posting from my template to my angular2 an image with its name. </p>

<p>I select the image from my machine:</p>

<pre><code>&lt;input type="file" multiple (change)="fileChange(input)" #input /&gt;
</code></pre>

<p>the fileChange method is receiving the file and save it in the img tag below, so when I am ready to submit the form it is there:</p>

<pre><code>&lt;form [formGroup]="myForm" (ngSubmit)="submit()"&gt;
    &lt;img [attr.src]='src' alt="" id="myphoto" name="myphoto" [formControl]="myphoto" /&gt;
    &lt;input type="text" id="photoname" name="photoname" [formControl]="photoname" /&gt;
    &lt;label for="photoname"&gt;Name&lt;/label&gt;
&lt;/form&gt;
</code></pre>

<p>in my photo.ts</p>

<pre><code>import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
.....
import { FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  // selector and templateurl
})

export class SendMyPhoto {
    myForm: FormGroup;
    ....
    constructor(builder: FormBuilder) {
      this.photoname = new FormControl("", []);
      this.myphoto= new FormControl("", []);

      this.myForm= builder.group({
        photoname: this.photoname,
        myphoto: this.myphoto
      });
    }
</code></pre>

<p>When I select the image from my machine, I get this error and the image doesn't display: </p>

<blockquote>
  <p>core.umd.js:2838 EXCEPTION: Error in
  /js/app/templates/myphoto.html:22:88 caused by: No value accessor for
  form control with name: 'myphoto'</p>
</blockquote>

<p>if I remove the </p>

<pre><code>[formControl]="myphoto"
</code></pre>

<p>the image displays fine with no error, but then there is no way for me to reference it in the formbuilder in the typescript so I can send it to my server. </p>

<p>I already tried using formcontrolname instead of [formControl] but no difference in behavior</p>