title: Angular2/4 populate form after request
body: <p>I am using the same form for both user adding and user editing. If a user is logged in I know that I'm editing the form and if a user is not logged in I'm adding a new user.</p>
  <p>The problem I'm facing is that when user is logged in I have to query the backend API for user data to fill the form and because the <code>GET</code> request is <code>async</code> the form is already created before i get the data. Here is what I have:</p>
  <pre><code>ngOnInit() {
  
      let userData = null;
  
      if (this.userService.userId) { // user is logged in, query for data
        this.http.get('http://localhost/api/user/get/' + this.userService.userId)
            .subscribe(
              (data) =&gt; {
                userData = data.json();
              },
             (error) =&gt; {
  
             }
        );
      }
  
  //init form
  this.form = new FormGroup({
    id: new FormControl(userData ? userData.id : ''),
    name: new FormControl(userData ? userData.name : '', Validators.required)
  });
  
  }
  </code></pre>
  <p>One solution I thought of is to duplicate the form init in the get block after I get the data but this doesn't seem like a good solution, especially when the form init can have a lot of fields.</p>
  <p>What would be a clean solution for this case?</p>