Angular 如何停止ngrx表单重新初始化操作？_Angular_Forms_Ngrx_Angular Forms

Angular 如何停止ngrx表单重新初始化操作？

angular forms

Angular 如何停止ngrx表单重新初始化操作？,angular,forms,ngrx,angular-forms,Angular,Forms,Ngrx,Angular Forms,[这个问题是基于我的angular组件中有一系列主题（字符串）。我使用ngrx存储管理状态，同时使用ngrx表单管理表单。在组件初始化期间，我为组件内的每个主题分派一些操作 ngOnInit(): void { this.formState$ = this.store.pipe(select(s => s.filterByTopics.formState)) this.topicsOptions$ = this.store.pipe(select(s => s

[这个问题是基于

我的angular组件中有一系列主题（字符串）。我使用ngrx存储管理状态，同时使用ngrx表单管理表单。在组件初始化期间，我为组件内的每个主题分派一些操作


 ngOnInit(): void {
    this.formState$ = this.store.pipe(select(s => s.filterByTopics.formState))
    this.topicsOptions$ = this.store.pipe(select(s => s.filterByTopics.topicsOptions))
    Object.keys(this.topics).forEach(topic => this.store.dispatch(new CreateTopicControlAction(topic)))
  }

这很好，ngrx表单控件正在添加

但真正的问题是，如果我再次访问同一组件，它会重新初始化操作（因为ngOnInit包含所有操作），并抛出一个错误：

Uncaught Error: Group 'filterByTopicsForm.topics' already has child control '0'!

我怎样才能防止这种情况

还有其他解决办法吗？

本文作者

这不是ngrx表单本身的问题，而是一个更一般的问题，即当状态在存储中时，如何防止双重初始化，因此不会与组件的寿命耦合

我在这里看到多个选项：

通过调度带有初始值的

SetValueAction

和

ResetAction

（或创建自己的自定义操作以在reducer中重新创建表单状态），在

ngondestory

中重置表单；这模拟了@angular/forms的行为，其中一个窗体的寿命仅与所属组件的寿命相同；下面是使用ngrx v8+的自定义操作时的情况：

const resetMyForm=createAction（'MY_FORM/reset'）；
const myFormReducer=createReducer(
{
formState:createFormGroupState（“我的表单”，初始表单值），
},
onNgrxForms（），
on（resetMyForm，（{formState}，{lang，code}）=>({
formState:createFormGroupState（“我的表单”，初始表单值），
})),
);

检查表单是否已在组件中初始化

ngOnInit（）：void{
this.formState$=this.store.pipe（选择（s=>s.filterByTopics.formState））
this.topicsOptions$=this.store.pipe（选择（s=>s.filterByTopics.topicsOptions））
Object.keys（this.topics）.forEach（topic=>{
this.formState$.pipe（take（1））.subscribe（formState=>{
//这个“如果”的具体形状取决于你的具体形状
如果（！formState.controls.topics.controls[topic]）{
this.store.dispatch（新的CreateTopicControlAction（主题））
}
})
})
}

检查表单是否已在减速器中初始化

const createTopicControl=createAction（'MY_FORM/createTopicControl'，（主题：string）=>（{topic}））；
const myFormReducer=createReducer(
{
formState:createFormGroupState（“我的表单”，初始表单值），
},
onNgrxForms（），
on（createTopicControl，（状态，{topic}）=>{
if（state.formState.controls.topics.controls[topic]）{
返回状态
}
//添加表单控件。。。
}),
);

我希望这能有所帮助。