Angular 如何创建一个嵌套的ngrx表单，它可以向其中添加或删除控件'；儿童群体？

如何创建嵌套的ngrx表单，该表单可以向其子组添加或删除控件

这里我想创建一个包含两个子组语言和主题的表单

export interface LanguageFormValue {
    languages: { [id: string]: { language: string, min: number, max: number } };
    preferredLanguage: string;
}

export interface TopicFormValue { 
    favoriteTopic: string; 
    otherTopics: {[id: string]: { [id: string]: boolean }}
 };

export interface AddNewEntryFormValue {
  languages: LanguageFormValue
  topics: TopicsFormValue;
}

export interface AddNewEntryFormState extends RootState {
  newEntry: {
    languages: {
      formState: FormGroupState<LanguageFormValue>;
      languageOptions: string[];
    };
    topics: {
    formState: FormGroupState<TopicsFormValue>;
    topicsOptions: string[];
  };
  };

}

export interface FilterByState extends RootState {
  filterBy: formState: FormGroupState<FilterFormValue>;

}

语言行动

export class CreateLanguageControlAction implements Action {
  static readonly TYPE = '[Entry Form] Add Language Control';
  readonly type = CreateGroupElementAction.TYPE;
  constructor(public name: string) { }
}

export class RemoveLanguageControlAction implements Action {
  static readonly TYPE = '[Entry Form] Remove Language Control';
  readonly type = RemoveGroupElementAction.TYPE;
  constructor(public name: string) { }
}

如何为上述表格编写减速机

我试过很多方法，但是减速机显示出错误

是否有任何方法可以组合子窗体组状态，同时保留在这些子状态中添加或删除控件的功能

我已经尝试将“filterBy”作为父窗体组，并尝试为子语言和主题组添加减缩器。但这失败了

我还尝试将每种语言和主题分别拆分为不同的reducer.ts文件。但是接下来我必须分别注册它们storeModule.forFeature（）。它正在工作，但这正在改变我的状态树结构（这不是我想要的）。因此，我尝试使用index.ts对这些分离的reducer文件的状态和reducer进行分组，并尝试将其注册为功能。但由于控件未定义，这也失败了

我试过其他几种方法。。。但一切都不起作用

是否有任何方法可以组合子窗体组状态，同时保留在这些子状态中添加或删除控件的功能

或者我们可以这样做：但仍然希望保留为子组（语言和主题）添加或删除功能

导出接口FilterByState扩展根状态{
过滤器by:formState:FormGroupState；
}

此处的作者

以下各项应能正常工作（使用ngrx v8+）。我还建议您使用ngrx v8+样式创建动作，否则无法正确使用现代减速器样式

const createTopicControl=createAction（'[输入表单]添加主题控件'，（名称：string）=>（{name}））；
const createLanguageControl=createAction（'[Entry Form]Add Language Control'，（名称：string）=>（{name}））；
const removeLanguageControl=createAction（“[Entry Form]Remove Language Control”，（name:string）=>（{name}））；
常量initialState:AddNewEntryFormState={
新条目：{
语言：{
formState:createFormGroupState（'LANGUAGES\u FORM'{
语言：{}，
首选语言：“”，
}),
语言选项：[]，
},
主题：{
formState:createFormGroupState（'TOPICS\u FORM'{
收藏夹主题：“”，
其他主题：{}，
}),
主题选项：[]，
},
}
}
导出常量addNewEntryFormStateReducer=createReducer(
初始状态，
onNgrxForms（），
on（createTopicControl，（状态，{name}）=>{
//是的，嵌套的缩减器很难看，看看像immer.js这样的选项
//让这不那么混乱
返回{
……国家，
新条目：{
…state.newEntry，
主题：{
…state.newEntry.topics，
formState:updateGroup（state.newEntry.topics.formState{
其他主题：addGroupControl（名称，{}），
}),
},
},
};
}),
on（createLanguageControl，（state，{name}）=>{
返回{
……国家，
新条目：{
…state.newEntry，
语言：{
…state.newEntry.languages，
formState:updateGroup（state.newEntry.languages.formState{
语言：addGroupControl（名称{
语言：''，
分:0,，
最高：0，
}),
}),
},
},
};
}),
on（removeLanguageControl，（state，{name}）=>{
返回{
……国家，
新条目：{
…state.newEntry，
语言：{
…state.newEntry.languages，
formState:updateGroup（state.newEntry.languages.formState{
语言：removeGroupControl（名称），
}),
},
},
};
}),
);

我希望这有帮助

export interface FilterByState extends RootState {
  filterBy: formState: FormGroupState<FilterFormValue>;

}