Initialise form from asynchronous observable

[Michael Battcock]

I have a 'job' component that will load a given job from Mongo based on an id retrieved from the router. 

I also have a 'job-form' component that is a sibling component and I want to initialise the input fields with the current job data. I'm currently retrieving the job data from an observable (rxjs BehaviourSubject) in a service but since the data from mongo is asynchronous the data I try to initialise the form with is undefined when the form is created So I get:

TypeError: Cannot read property 'name' of null

I tried using: job?.name but then I get:

The '?.' operator cannot be used in the assignment at column 11 in [job?.name=$event]  

I also tried using the async pipe but I get:

Cannot have a pipe in an action expression at column 12 in [job.name | async=$event]

So whats the best approach here?

Also, if i've already loaded my job in my 'job' component can I not just get that variable from my 'job form' component without having to call it up from Mongo for a second time? Currently I have to call my service function from my job form component as well to get the subscription to work, e.g.:

  getJobById(id) {

    this.subscription = this.subscribe('jobs', () => {

      this.job$.next(Jobs.findOne({"_id":id}));

    }, true); 

  }

[Sander Elias]

Hi Michael,

use the && to neglect the assignment until a value is actually in.

looks a bit like:

{{ job && job.name = $event }}

I think this might work in your case.

Regards

Sander

[Michael Battcock]

Hi Sander, 

Thanks for the tip! I can't use that with the [(ngModel)] syntax as I get the following error:

Bindings cannot contain assignments

Which makes sense. But I can use the following syntax, to split out the get and set methods, and then it works:

[ngModel]="job && job.name" (ngModelChange)="job.name = $event"

Not the most elegant, but at least it works. The other alternative is I can initialise all the properties in my component which is maybe a bit cleaner but requires me to keep track of the properties of my job model which is slightly annoying.. Unless theres a way to create a typescript object and initialise everything to a default value automatically based on the interface?

Thanks for your help,

Mike

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/TIwT89zH2-w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Lucas Lacroix]

There is also an async pipe available that allows you to pipe in an observable:

https://angular.io/docs/ts/latest/guide/pipes.html

Not sure if it's applicable to your example.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293