目前我有一个项目使用 NGRX 作为其存储和 react 形式。
在我的应用程序中，我想将我状态下的事件项目映射到 react 形式。所以在我的组件中我有类似的东西:
export class MyComponent {
active$: Observable<any>;
form = this.fb.group({
name: ['', [Validators.required]],
description: ['', Validators.maxLength(256)]
});
constructor(private fb: FormBuilder, private store: Store<any>) {
this.active$ = store.select(store => store.items);
}
}
为了避免必须订阅商店和选择我的商品，我创建了一个指令来将我的可观察对象绑定(bind)到我的表单:
import { Directive, Input } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';
@Directive({
selector: '[connectForm]'
})
export class ConnectFormDirective {
@Input('connectForm')
set data(val: any) {
if (val) {
this.formGroupDirective.form.patchValue(val);
this.formGroupDirective.form.markAsPristine();
}
}
constructor(private formGroupDirective: FormGroupDirective) { }
}
现在在我的表单中，我只是像这样绑定(bind)它:
<form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" [connectForm]="active$ | async">
</form>
我的问题是:
- 这是个好主意吗/是否有更好的方法来处理这个问题？
我想在一天结束的时候，对于复杂的场景，您将不得不订阅组件中的可观察对象。
最佳答案
您应该考虑将您的组件拆分为“已连接”和“演示”组件。您连接的组件将负责查询商店并向商店发出操作，您的演示组件将在其中创建一个表单组并接受来自商店的值作为 @Input 参数。然后，您可以在演示组件中监听表单组中的值更改，并向连接的组件引发具有更新值的事件。连接的组件然后将处理来自展示组件的事件并引发新操作以更新商店中的值。
关于Angular NGRX/Observables 和 react 形式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47422232/