如何使用Observable初始化反应式Angular2表单？

Question

如何使用Observable初始化反应式Angular2表单？

angulartypescriptobservablengrxangular-reactive-forms

13

我的计划是将表单的值存储在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？

- Nate May

2个回答

6

我可以想到两个选项...

选项1：

在显示表单的HTML上使用*ngIf，类似于：

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

您需要考虑如何处理商店和当前模型的更新。

- shusson

1

我无法用这种方式使它工作。 “startsWith（）在类型Observable上不存在”。该函数似乎仅适用于字符串。 - Nate May

抱歉，方法应该是 startWith。https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/startwith.md - shusson

.startWith() worked on the first iteration, but when the second (dev mode) ran it was again undefined. I got it to work by removing startWith() and changing my selector to: return _.cloneDeep(state.recipebuilder) || someDefaultValue; - Nate May

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cartant · Accepted Answer

尽管添加另一层可能会看起来更加复杂，但是通过将单个组件分成两个组件：一个容器组件和一个展示组件，可以更轻松地处理可观察对象。

容器组件仅处理可观察对象而不涉及呈现。来自任何可观察对象的数据都通过@Input属性传递给展示组件，并使用async管道：

@Component({
  selector: "recipe-container",
  template: `<recipe-component [recipe]="recipe$ | async"></recipe-component>`
})
export class RecipeContainer {

  public recipe$: Observable<any>;

  constructor(private store: Store<AppState>) {
    this.recipe$ = store.select(recipeBuilderSelector);
  }
}

表现组件接收简单的属性，不需要处理可观察对象：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "recipe-component",
  template: `...`
})
export class RecipeComponent {

  public recipeForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.recipeForm = this.formBuilder.group({
      foodName: [""],
      description: [""]
    });
  }

  @Input() set recipe(value: any) {
    this.recipeForm.patchValue({
      foodName: value.name,
      description: value.description
    });
  }
}

使用容器组件和展示组件的概念是Redux中的一个通用概念，详细解释可参考《Presentational and Container Components》。