How to force FormlyFormOptions to rebuild hidden fields?

Suppose I have a form with 2 fields: Restaurant and Location.

In my Angular ngOnInit, I first:

this.model = this.versionedStorage.load() || new MyModel();
this.assignFields(); //this.fields = [...]


Next I make API calls, getting a list of restaurants, and then states.

this.api.getRestaurants().subscribe(
response => {

const restaurantId = this.model.restaurant as number;

}



The type assertion as number is because, in order to get my form working with a custom autocomplete/typeahead component, I needed to type restaurant as either number | {value: number, label: string}. I always parse out the value so the restaurant.id is being saved to my version control.

When the API call fetching restaurants completes, I check the number:

if (restaurantId) {
const matchingRestaurant = this.restaurants.find( (restaurant) => { return restaurant.id === restaurantId });
if (matchingRestaurant) {
(this.model.restaurant as unknown as {value: number, label: string}) = matchingRestaurant;
}
}


I know this looks strange; the autocomplete/typeahead form is doing the right thing to show the restaurant name as the label.

After completing the API call and potentially assigning a matching restaurant, I call:

this.options.build(); //FormlyFieldOptions


I've tried:

this.options.updateInitialValue(this.model);


too.

This is all working so far. What it not working is related to Hide Expressions. When Alaska is selected for the Location, the hide expression for Restaurant hides the restaurant field. Meaning, my business logic dictates I don't want any restaurant selected when the state is Alaska.

I save the form with Alaska selected. I relaunch the form. The rebuild fires, but because the restaurant form is hidden, it did not get rebuilt. When I change states, Hide Expression updates the restaurant field's visibility. What is rendered there, to my horror, is [object Object].

The component rendering is simply doing formControl.value?.label || formControl.value in its ngOnInit, in the success path, I can console.log(this.value) and it shows up as just the restaurantId number value.

In the case where [object Object] gets rendered, the full object is being logged.

Therefore I think what is:

• the form versioned control loads the number id
• the form field, being visible, re-renders with the correct data

When the state is Alaska:

• the API call completes before the field is rendered. the callback to the API calls rebuild. the field does not get re-rendered, but the model did get updated (correctly, with the find matching restaurant logic in the API callback)
• the field is not rebuild, so it shows "[object Object]".

I think the solution I need is: force the form to rebuild all the fields, even the hidden ones, after the API completes.

How could I accomplish this - or something else to fix the display bug?

UPDATE:

Rebuilding on a setInterval does not A) recall the fields ngOnInit B) not fix the object Object rendering

So I suspect something is structurally wrong with my control flow.

UPDATE 2: redoing the api call and overriding the model on a set interval, DOES show the correct thing. That is, I change the state to a non-Alaska field. Then I wait a few seconds for my interval, then the API call fires, the model restaurant assignment completes, and the data renders correctly.

How could I get this to happen immediately after the unhide occurs?

Continue reading...