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

Question

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

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

要解决这个问题，我想我必须创建多个 Angular 表单。但是，我无法将它们全部绑定到相同的状态属性 form，因为在每个步骤中我只有一部分属性。

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

在代码中，当前：

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

提议：

personalDetailsForm: {
model: PersonalDetailsModel, 
},
workDetailsForm: {
model: WorkDetailsModel
}

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

这是要走的路还是有更简单的方法？

Answer 1

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

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

它有助于为每个步骤编写验证规则；
你可以检查一下，每一步都是valid/invalid表格
以防万一，如果你把它存储在父组件中，你可以编写在步骤之间切换的逻辑（例如，如果当前步骤无效，则不允许转到另一个步骤）

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>

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

NGXS Forms - How to handle nested form components

angular

ngxs