Home Async binding in dynamic form
Reply: 1

Async binding in dynamic form

MgSam
1#
MgSam Published in 2018-02-13 21:33:13Z

Based on the Angular guide on creating dynamic forms I've set up a bunch of classes that can create forms on the fly. This works great, but it doesn't actually save much effort over just writing the html if I can't just dynamically base the forms on a model object.

So I created a service that dynamically builds the forms based on the properties in a model object.

The problem- the model object is returned from a web service asynchronously. So Angular blows up when doing its initial binding.

<dynamic-form [formConfig]="formConfig"></dynamic-form>

I've tried making formConfig a Promise or an Observable and changing this call to:

<dynamic-form [formConfig]="formConfig | async"></dynamic-form>

but it is still trying to bind immediately and blowing up because undefined is being passed into <dynamic-form>.

I believe the problem is that the async pipe doesn't seem to work as I'd expect on my custom component.

Any advice?

MgSam
2#
MgSam Reply to 2018-02-14 13:54:59Z

For whatever reason, the async pipe doesn't seem to work properly with user-written components. I found that instead, guarding the whole thing with *ngIf fixes the problem.

<div *ngIf="formConfig | async; let formConfig">
    <dynamic-form [formConfig]="formConfig"></dynamic-form>
</div>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.322677 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO