NGXS表单-如何处理嵌套的表单组件

Question

我有一个包含多个步骤的用户配置文件表单，即一个向导。在提交/保存时，必须将整个用户配置文件表单提交给API我使用的是NGXS和NGXS表单。

目前，我已经将UI实现为单个Angular Reactive Forms和单个状态属性form，该模型属于API所期望的类型。每个步骤都有一个组件，但它们都使用相同的form。这种方法的大问题是，我无法检测步骤上的字段是否有效，只能检测整个表单是否有效。

为了解决这个问题，我认为我必须创建多个Angular形式。但是，我不能将它们全部绑定到相同的状态属性form，因为在每个步骤中，我只有一个子集的属性。

因此，我现在的想法是在我的状态下为每个步骤创建一个表单属性，每个步骤都有自己的接口来存储属性。然后，我可以创建一个选择器，该选择器将返回我可以提交给API的整个对象。

代码中，当前：

form: {
model: UserProfileDto,
....
}

建议：

personalDetailsForm: {
model: PersonalDetailsModel, 
},
workDetailsForm: {
model: WorkDetailsModel
}
@Selector(ProfileDetails)
profileDetails(state: ProfileState) {
return {...state.workDetailsForm.model, ...state.personalDetailsForm.model}
}

这是一条路吗？还是有更简单的方法？

Answer 1

这是一个非常有意见的问题，但我可以分享我的想法。

在父组件中，我将为每个步骤创建单独的表单：

• 它有助于为每个步骤编写验证规则
• 您可以在每个步骤中检查是否为有效/无效表格
• 在这种情况下，如果将其存储在父组件中，则可以编写用于在步骤之间切换的逻辑(例如，如果当前步骤无效，则不允许转到另一个步骤(

export class Component {
ngOnInit(): void {
this.workDetailsForm = this.buildWorkForm();
this.personalDetailsForm = this.buildPersonalForm();

// and through merge + valueChanges you can get the last object at any time
merge(
this.workDetailsForm.valueChanges,
this.personalDetailsForm.valuesChanges  
)
.subscribe(() => {
this.profileDetails = {
...this.workDetailsForm.value, 
...this.personalDetailsForm.value
};
});
// here you can check, that the whole form is valid
merge(
this.workDetailsForm.statusChanges,
this.personalDetailsForm.statusChanges  
)
.subscribe(() => {
this.isFormValid = this.workDetailsForm.valid && this.personalDetailsForm.valid;
});
}

}

<app-step-work-details
[form]="workDetailsForm"> </app-step-work-details>
<app-step-personal-details
[form]="personalDetailsForm"> </app-step-personal-details>