title: How to include a file upload control in an Angular2 reactive form?
body: <p>For some weird reason, there are just no tutorials or code samples online showing how to use Angular2 Reactive forms with anything more than simple input or select dropdowns. </p>
  
  <p>I need to create a form to let users select their avatar. (Image file)</p>
  
  <p>The following doesn't work. (i.e. The Avatar property never shows any value changes.)</p>
  
  <p>profile.component.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>               &lt;form [formGroup]="profileForm" novalidate&gt;
                   
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-4 "&gt;
                                  &lt;img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;"&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Update Profile Image&lt;/label&gt;
                                      &lt;input class="form-control" type="file" formControlName="avatar"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-8 "&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label &gt;Firstname:
                                          &lt;input class="form-control" formControlName="firstname"&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label &gt;Lastname:
                                          &lt;input class="form-control" formControlName="lastname"&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label &gt;Email:
                                          &lt;input class="form-control" formControlName="email"&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label &gt;Password:
                                          &lt;input class="form-control" type="password" formControlName="password"&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                   
                  &lt;/form&gt;
                  &lt;p&gt;Form value: {{ profileForm.value | json }}&lt;/p&gt;
                  &lt;p&gt;Form status: {{ profileForm.status | json }}&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>profile.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup,  Validators } from '@angular/forms';
  import {Config} from '../../services/config.service';
  import {AuthService} from '../../services/auth.service';
  import {User} from '../../models/user.model';
  
  @Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
  })
  export class ProfileComponent implements OnInit {
    
    authUser:User;
  
    profileForm : FormGroup; 
  
    constructor(private authService:AuthService, private fb: FormBuilder) {}
            
    createForm() {
      this.profileForm = this.fb.group({
        firstname:  [this.authUser.firstname, Validators.required ],
        lastname: [this.authUser.lastname, Validators.required ],
        email: [this.authUser.email, Validators.required ],
        avatar: [this.authUser.avatar, Validators.required ],
        password:['xxxxxx', Validators.minLength(4)] 
      });
    }
    ngOnInit() {
      this.authUser = this.authService.getAuthUser();
  
      this.createForm();
    } </code></pre>
  </div>
  </div>
  </p>