Angularjs   发布时间:2019-10-10  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用Observable初始化Reactive Angular2表单?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的计划是将表单的值存储在我的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仍未定义.

这是错误的方法,还是我能以某种方式确保在创建表单之前返回observable?

我可以想到两个选择……

选项1:

在显示表单的html上使用*ngIf

<form *ngIf="this.recipe">...</form>

选项2:
在模板中使用async管道并创建模型,如:

零件

@H_236_3@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>

您必须虑如何处理商店和当前模型的更新.

大佬总结

以上是大佬教程为你收集整理的如何使用Observable初始化Reactive Angular2表单?全部内容,希望文章能够帮你解决如何使用Observable初始化Reactive Angular2表单?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。