How to include a file upload control in an Angular2 reactive form? : <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>
