title: What is the way to pass pre-populated values to Angular 2 reactive form input
body: <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroup, Validators } from '@angular/forms';
  
  import { User } from '../account.interface';
  import { AF } from '../angularfire.service';
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    styleUrls: ['./account.component.less']
  })
  export class AccountComponent implements OnInit {
    public error: any;
    user: FormGroup;
    onSubmit() {
      console.log(this.user.value, this.user.valid);
    }
  
    currentUserDetails = [];
    firstName: string = '';
    lastName: string = '';
    email: string = '';
    phone: string = '';
    bio: string = '';
    userID: string = '';
  
    constructor(private afService: AF) {
      // Get current user details and push to array.  This is due to input values overwriting ngModels.
      afService.getCurrentUserInfo().then(currentUserDetails =&gt; {
        let currentUser = [];
        currentUser.push(currentUserDetails);
        this.firstName = currentUser[0].firstName;
        this.lastName = currentUser[0].lastName;
        this.email = currentUser[0].email;
        this.phone = currentUser[0].phone;
        this.bio = currentUser[0].bio;
        this.userID = currentUser[0].userID;
      }).then(() =&gt; {
  
      })
    }
  
    // Update the user details with the form entry.
    // updateUserEntry(firstName, lastName, phone, bio) {
    //   this.afService.updateUserEntry(this.userID, firstName, lastName, phone, bio).then(() =&gt; {
    //     location.reload();
    //   }).catch((error) =&gt; {
    //     this.error = error;
    //     console.log(&quot;error&quot;);
    //   });
    // }
  
    ngOnInit() {
      this.user = new FormGroup({
        fname: new FormControl(this.firstName, [Validators.required, Validators.minLength(3), Validators.maxLength(24)]),
        lname: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]),
        phone: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(24)]),
        bio: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]),
      });
    }
  
  }
  </code></pre>
  <p>I know it's probably a really simple fix, I'm just not seeing it.  I have my reactive <code>formControl</code>'s in my <code>ngOnInit</code> but I need to pass preset values into each input (which is <code>this.firstName</code>, <code>this.lastName</code>, etc.).  When the view loads, the inputs are empty.</p>
  <p>I believe the values aren't showing up because the form is loading before the values are populated.  Any ideas on how to fix this?</p>