Async data in ngModel

Question

I have the form with async data:

<form>
 <input [(ngModel)]="currentService.user.username">
 <input [(ngModel)]="currentService.user.email">
</form>

It works only if I add *ngIf="currentService.user" to the form, but I want to render inputs without value before I get data from the server. But I get the following error:

'Cannot read property 'username' of undefined'

How can I solve this? Probably, I need something like async pipe to ngModel, but this does not work, obviously.

Answer 1

You could Try this out

 <input [(ngModel)]="currentService.user && currentService.user.username">
 <input [(ngModel)]="currentService.user && currentService.user.email">

Working Example

Answer 2

You need to initialize the user in your service. I think your code looks like this:

private user: User;

and then later you make a HTTP call or something like that to set the user. But at the time the user is retrieved the user is undefined until the async call is finished.

So if you change your line like this it should work:

private user: User = new User;

Answer 3

You have to define currentService as a object as below then you can use it before you get the data from the server.

currentService = {
    user : {
        username: '',
        email: ''
    }
}

then

<form>
 <input [(ngModel)]="currentService.user.username">
 <input [(ngModel)]="currentService.user.email">
</form>