#Issue with form loading

23 messages · Page 1 of 1 (latest)

glacial mantle
#

I am using formly model and populating it based on the parameter within my url, make a GET request and populate the data into my form. This works except on initial render the values are empty then they populate within the form... ideally i wouldnt want to show this form until its ready to be viewed this.route.params .pipe( mergeMap((params) => this.recipeService.getRecipeById(params.id) )) .subscribe((recipe) => this.model = recipe ); template: ```<div class="row" *ngIf="(recipeService.recipeEdit | async) as recipe">

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

</div>```

bold notch
#

I'm not sure what the relation is between the first and the second snippet. But given you're using an ngIf in your template, it shouldn't display until recipe has been emitted from recipeService.recipeEdit. So this condition is probably not the thing you should have in your ngIf. Instead, you should check if the model is there or not, since that's what you need to populate your form. You probably also want switchMap and not mergeMap.

glacial mantle
#

i am a bit confused when to use switchMap versus the mergeMap

#

the getRecipe method calls this._recipeEdit.next(recipeNew);and the relation to this is private _recipeEdit: BehaviorSubject<Recipe> = new BehaviorSubject(null); public readonly recipeEdit: Observable<Recipe> = this._recipeEdit.asObservable();

#

so im checking if i have the recipeEdit value i.e the get by id went through

#

hence the *ngIf="(recipeService.recipeEdit | async)

bold notch
#

I don't know what the getRecipe method is. You seem to overcomplicate things by havoing several observables, a behavior subsject and what not.

glacial mantle
# 
        return this.http.get<Recipe>(`/api/recipe/${recipeId}`)
                        .pipe(
                            shareReplay(),
                            take(1),
                            tap((recipe) => {
                                this._recipeEdit.next(recipe);
                            })
                        );
    }```
#

i read online we do not want to expose behaviorSubjects as we can push data to it

#

hence why i only expose observable

bold notch
#

But why have a subject in the first place? Why not just use

getRecipeById(recipeId: mongoose.Types.ObjectId): Observable<Recipe> {
  return this.http.get<Recipe>(`/api/recipe/${recipeId}`);
}

What do you think take(1) does? What do you think shareReplay() does? It seems you're using semi-random operators without understanding what they do.

glacial mantle
#

shareReplay i believe if we have multiple subscriptions it reuses the same value so we dont make multiple api calls.. take 1 i believe after the first value is emitted it compeltes and unsubs everyone

#

i have the behavior subject so i can directly reference the observable version of it within my application and push updates to it with the next function

bold notch
#

OK. So, is the observable returned by this method every stored somewhere and be subscribed multiple times? If not, shareReplay is useless.
When you send an HTTP request, will the server aver send back many HTTP responses? Does the HTTP protocol allow that? Then why use take(1)?

glacial mantle
#

i understand, i guess i did it as a safe guard

#

so take1 in this case is useless

bold notch
#

Regarding "push updates to it", why would you want to push updates to an observable which, apparently, represents a value you're currently editing. At the end of the edition, save the recipe on the server, then navigate to another page, and let that page get the most up to date version from the server if it needs it.

glacial mantle
#

the point is with an observabe we cant call .next to it

#

hence why i only exposed an obsrevable and not a behavior subject

#

the behavior subject is like an internal state i can keep track of

#

and reduce the amount of api calls

#

such as

# 
                                this._recipes.next(updatedList);```