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

Question

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

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

为了解决这个问题，我想我必须创建多个 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>