Angular2: Form Build + asynchronous data loading
<p>I have a form created using Form Builder (Angular2 Beta 1, TypoScript), i.e.: there’s something like this in <code>constructor</code>:</p>

<pre><code>this.form = this._formBuilder.group({
    'username': ['', Validators.required],
    'email': ['', Validators.required]
});
</code></pre>

<p>The form shows up, everything is nice so far. What I <em>don’t</em> really get is how I handle the binding when I load the data (in this case: a User object) from a remote service (or some other asynchronous loading mechanism).</p>

<p>What I have tried, is:</p>

<ul>
<li>Load the data asynchronously in <code>constructor</code> or <code>ngOnInit</code>. Problem: Throws an exception, even before the loading starts (“Cannot read property 'validator' of undefined …”)</li>
<li>Load the data asynchronously in <code>constructor</code> or <code>ngOnInit</code>, but before that create an empty form. Problem: validation does not work.</li>
<li>What I would have expected to work: bind the form data to properties of a <code>User</code> object, and set properties of that object. Problem: no exception, but the data does not show up in the form.</li>
</ul>

<p>I guess there must be some smarter/better way to get this working? I’m rather new to Angular2, so I hope the question is not too dumb …</p>

<p>---- Update ----</p>

<p>First, I forgot to mention that I use <code>ngFormModel</code> in the form – in case it’s important.</p>

<p>And @Thierry: I think that “temporary empty object to bind with the form” is what I tried to do (the 3rd approach mentioned above) but what didn’t work. Precisely, I tried this:</p>

<pre><code>constructor(private _formBuilder:FormBuilder) {
    this.user = new User;
    this.user.username = 'abc';
    this.form = this._formBuilder.group({
        'username': [this.user.username, Validators.required],
    });
}
</code></pre>

<p>This displays the username, but it doesn’t even work when I move the line which sets <code>this.user.username</code> to the end of the constructor – which I find pretty surprising, as I would have expected data binding to take care of this.</p>