Angular 形式 : best practise for complex nested reactive forms and validation at root component

Question

几天来，我一直在努力为我的用例找到一个好的模式。我有一个非常复杂的响应式(Reactive)表单，充满了嵌套组件，一些字段是必需的，某些字段可能会在特定条件下出现，等等……这给维护代码带来了巨大的问题。到目前为止，我使用的方法是将 formControl 传递给子组件并从那里填充，但是鉴于表单的大小，事情开始变得非常难以调试。此表单必须在提交整个表单时，对所有嵌套字段进行验证，并标记所有需要但尚未插入的字段。我一直在探索 2 种方法，但 2 种方法似乎都没有任何帮助:

Control Value Accessor:概念很完美，逻辑在子级之间完美分割，父级不必关心它，但缺点是子级 Controller 没有暴露，我不能把所有子窗体都标记为AsTouch来显示各自的错误

控件容器:这种方法似乎需要在父级定义所有控件，但作为一个非常大的形式，它似乎真的适得其反，并没有真正解决我的问题。

我想知道是否有人对此类表格有任何经验，并能够就这种情况下的最佳做法提供一些指导。
我使用 Control Container 做了一个非常简单的 stackblitz，只有一个子 child ，不幸的是我无法让它运行 https://stackblitz.com/edit/angular-ivy-axbgr5

Answer 1

Angular 中的复杂表单可能是一个大麻烦。根据我的经验，最好的方法是创建一个有状态的父组件和许多子无状态组件。

父组件需要专用于特定的表单。子组件可以在任何地方多次重复使用。

父组件规则:

有状态

创建并保存表单定义

在每次表单更改时发出表单状态(值、有效、原始)

拥有自定义验证逻辑

子组件规则:

无国籍

从父级

接收表单部件(嵌套 FormGroups)

没有自定义验证逻辑

在上述场景中，子组件是没有任何验证逻辑的“可重用 View ”。它总是来自 parent 。

如何将表单部件传递给子组件？

您可以通过嵌套 FormGroups通过以下方式:

通过 Input ( https://github.com/p-programowanie/angular-forms/tree/forms-form-group )

通过 ControlContainer和构造函数注入(inject) ( https://github.com/p-programowanie/angular-forms/tree/forms-control-container )

通过 ControlContainer和 viewProvider注入(inject) ( https://github.com/p-programowanie/angular-forms/tree/forms-control-container-provider )

控制值访问器(accessor)

我认为使用 ControlValueAccessor用于创建表单部件不是一个好主意。验证逻辑封装在里面。这是创建一些非常困难的部分的好方法，例如“颜色选择器”，而不仅仅是具有多个字段的“客户地址”。

组件外的业务逻辑

我还尝试使用以下简单代码将业务逻辑移出组件:

constructor(public businessLogic: VendorBusinessLogicService) { }

ngOnInit() {
    this.form = this.businessLogic.createForm(this.initialValue);

    this.subscription = this.form.valueChanges.subscribe(value => {
        this.businessLogic.applyBusinessLogic(value);
        this.emitFormState();
    });

    this.emitFormState();
}

当然，要求是在服务内部保存表单引用。老实说，我看不出它的好处。这项业务逻辑服务看起来很可怕。 ( https://github.com/p-programowanie/angular-forms/tree/forms-separated-business-logic )