我的计划是将表单的值存储在我的ngrx商店中,以允许我的用户浏览网站并返回表单(如果他们愿意).我们的想法是,表单的值将使用可观察对象从商店重新填充.
这是我目前正在做的事情：
constructor(private store: Store<AppState>,private fb: FormBuilder) {
this.images = images;
this.recipe$= store.select(recipeBuilderSelector);
this.recipe$.subscribe(recipe => this.recipe = recipe); // console.log() => undefined
this.recipeForm = fb.group({
foodName: [this.recipe.name],// also tried with an OR: ( this.recipe.name || '')
description: [this.recipe.description]
})
}
商店给出了一个初始值,我已经看到它正确地通过我的选择器函数,但是当我的表单被创建时,我不认为该值已经返回.因此this.recipe仍未定义.
我可以想到两个选择……
原文链接：https://www.f2er.com/angularjs/240455.html选项1：
<form *ngIf="this.recipe">...</form>
选项2：
在模板中使用async管道并创建模型,如：
零件
model: Observable<FormGroup>;
...
this.model = store.select(recipeBuilderSelector)
.startWith(someDefaultValue)
.map((recipe: Recipe) => {
return fb.group({
foodName: [recipe.name],description: [recipe.description]
})
})
模板
<app-my-form [model]="(model | async)"></app-my-form>
您必须考虑如何处理商店和当前模型的更新.
