I have a form created using Form Builder (Angular2 Beta 1, TypoScript), i.e.: there’s something like this in constructor
:
this.form = this._formBuilder.group({
'username': ['', Validators.required],
'email': ['', Validators.required]
});
The form shows up, everything is nice so far. What I don’t 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).
What I have tried, is:
constructor
or ngOnInit
. Problem: Throws an exception, even before the loading starts (“Cannot read property 'validator' of undefined …”)constructor
or ngOnInit
, but before that create an empty form. Problem: validation does not work.User
object, and set properties of that object. Problem: no exception, but the data does not show up in the form.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 …
---- Update ----
First, I forgot to mention that I use ngFormModel
in the form – in case it’s important.
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:
constructor(private _formBuilder:FormBuilder) {
this.user = new User;
this.user.username = 'abc';
this.form = this._formBuilder.group({
'username': [this.user.username, Validators.required],
});
}
This displays the username, but it doesn’t even work when I move the line which sets this.user.username
to the end of the constructor – which I find pretty surprising, as I would have expected data binding to take care of this.
You could also update individual controls in the FormGroup after data is loaded. For example:
this._http.get('/user/123')
.map(response => response.json())
.subscribe(user => {
this.form.find('username').updateValue(user.username);
this.form.find('email').updateValue(user.email);
})
Important part is that you can find control instance in the formGroup one and update its value. Or simple
this.form.controls.username.updateValue(user.username)
would also work.
UPD. Note that in recent versions API has changed so you need to access username
with getter:
this.form.get('username').setValue(user.username)
I see several solutions to this:
*ngIf
to display the form only when the data are there@CanActivate
decorator (if you use routing) to display the component where the form is, only when data are thereHere is a plunkr: https://plnkr.co/edit/metUkOB7Sqfyr9DtCLR0?p=preview.
Hope it helps you, Thierry
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With