forms - Angular 2 - 大规模申请表的处理

Question

在我工作的公司，我们正在开发一个包含多个表单的大型应用程序，用户需要填写该表单才能注册我们的程序。回答完所有问题后，用户会到达一个总结所有答案的部分，突出显示无效答案，并让用户有机会重新访问前面的任何表单步骤并修改他们的答案。此逻辑将在一系列顶级部分中重复，每个部分都有多个步骤/页面和一个摘要页面。

为实现这一点，我们为每个单独的表单步骤(它们是“个人详细信息”或“资格”等类别)创建了一个组件，以及它们各自的路线和一个用于摘要页面的组件。

为了尽可能保持 DRY，我们开始创建一个“主”服务，其中包含所有不同表单步骤(值、有效性等)的信息。

import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import { ValidationService } from '../components/validation/index';

@Injectable()
export class FormControlsService {
  static getFormControls() {
    return [
      {
        name: 'personalDetailsForm$',
        groups: {
          name$: [
            {
              name: 'firstname$',
              validations: [
                Validators.required,
                Validators.minLength(2)
              ]
            },
            {
              name: 'lastname$',
              validations: [
                Validators.required,
                Validators.minLength(2)
              ]
            }
          ],
          gender$: [
            {
              name: 'gender$',
              validations: [
                Validators.required
              ]
            }
          ],
          address$: [
            {
              name: 'streetaddress$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'city$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'state$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'zip$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'country$',
              validations: [
                Validators.required
              ]
            }
          ],
          phone$: [
            {
              name: 'phone$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'countrycode$',
              validations: [
                Validators.required
              ]
            }
          ],
        }
      },
      {
        name: 'parentForm$',
        groups: {
          all: [
            {
              name: 'parentName$',
              validations: [
                Validators.required
              ]
            },
            {
              name: 'parentEmail$',
              validations: [
                ValidationService.emailValidator
              ]
            },
            {
              name: 'parentOccupation$'
            },
            {
              name: 'parentTelephone$'
            }
          ]
        }
      },
      {
        name: 'responsibilitiesForm$',
        groups: {
          all: [
            {
              name: 'hasDrivingLicense$',
              validations: [
                Validators.required,
              ]
            },
            {
              name: 'drivingMonth$',
              validations: [
                ValidationService.monthValidator
              ]
            },
            {
              name: 'drivingYear$',
              validations: [
                ValidationService.yearValidator
              ]
            },
            {
              name: 'driveTimesPerWeek$',
              validations: [
                Validators.required
              ]
            },
          ]
        }
      }
    ];
  }
}

该服务被所有组件使用，以便为每个组件设置 HTML 表单绑定(bind)，通过访问相应的对象键并创建嵌套表单组，以及摘要页面，其表示层仅为 1way绑定(bind)(模型 -> View )。

export class FormManagerService {
    mainForm: FormGroup;

    constructor(private fb: FormBuilder) {
    }

    setupFormControls() {
        let allForms = {};
        this.forms = FormControlsService.getFormControls();

        for (let form of this.forms) {

            let resultingForm = {};

            Object.keys(form['groups']).forEach(group => {

                let formGroup = {};
                for (let field of form['groups'][group]) {
                    formGroup[field.name] = ['', this.getFieldValidators(field)];
                }

                resultingForm[group] = this.fb.group(formGroup);
            });

            allForms[form.name] = this.fb.group(resultingForm);
        }

        this.mainForm = this.fb.group(allForms);
    }

    getFieldValidators(field): Validators[] {
        let result = [];

        for (let validation of field.validations) {
            result.push(validation);
        }

        return (result.length > 0) ? [Validators.compose(result)] : [];
    }
}

之后，我们开始在组件中使用以下语法以访问主表单服务中指定的表单控件:

personalDetailsForm$: AbstractControl;
streetaddress$: AbstractControl;

constructor(private fm: FormManagerService) {
    this.personalDetailsForm$ = this.fm.mainForm.controls['personalDetailsForm$'];
    this.streetaddress$ = this.personalDetailsForm$['controls']['address$']['controls']['streetaddress$'];
}

在我们缺乏经验的眼中，这似乎是代码的味道。鉴于我们最终拥有的部分数量，我们非常担心这样的应用程序将如何扩展。

我们一直在讨论不同的解决方案，但我们无法想出一个可以利用 Angular 的表单引擎、让我们保持验证层次结构完整且简单的解决方案。

有没有更好的方法来实现我们想要做的事情？

Answer 1

我在别处评论过关于 @ngrx/store 的评论，虽然我仍然推荐它，但我相信我对你的问题有点误解。

无论如何，您的 FormsControlService 基本上是一个全局常量。说真的，用

替换 export class FormControlService ...

export const formControlsDefinitions = {
   // ...
};

这有什么区别？您无需获取服务，只需导入对象即可。由于我们现在将其视为类型化的 const 全局变量，因此我们可以定义我们使用的接口(interface)...

export interface ModelControl<T> {
    name: string;
    validators: ValidatorFn[];
}

export interface ModelGroup<T> {
   name: string;
   // Any subgroups of the group
   groups?: ModelGroup<any>[];
   // Any form controls of the group
   controls?: ModelControl<any>[];
}

既然我们已经这样做了，我们就可以将各个表单组的定义移出单个整体模块，并在我们定义模型的地方定义表单组。干净多了。

// personal_details.ts

export interface PersonalDetails {
  ...
}

export const personalDetailsFormGroup: ModelGroup<PersonalDetails> = {
   name: 'personalDetails$';
   groups: [...]
}

但现在我们的所有这些单独的表单组定义都分散在我们的模块中，无法将它们全部收集起来:(我们需要一些方法来了解我们应用程序中的所有表单组。

但我们不知道将来会有多少个模块，我们可能希望延迟加载它们，因此它们的模型组可能不会在应用程序启动时注册。

控制反转来拯救!让我们创建一个具有单一注入(inject)依赖项的服务 -- 一个多提供程序，当我们将它们分布在我们的模块中时，它可以注入(inject)我们所有分散的表单组。

export const MODEL_GROUP = new OpaqueToken('my_model_group');

/**
 * All the form controls for the application
 */
export class FormControlService {
    constructor(
        @Inject(MMODEL_GROUP) rootControls: ModelGroup<any>[]
    ) {}

    getControl(name: string): AbstractControl { /etc. }
}

然后在某处创建一个 list 模块(注入(inject)“核心”应用程序模块)，构建您的 FormService

@NgModule({
   providers : [
     {provide: MODEL_GROUP, useValue: personalDetailsFormGroup, multi: true}
     // and all your other form groups
     // finally inject our service, which knows about all the form controls
     // our app will ever use.
     FormControlService
   ]
})
export class CoreFormControlsModule {}

我们现在有一个解决方案是:

• 更本地化，表单控件与模型一起声明
• 更具可扩展性，只需要添加一个表单控件，然后将其添加到 list 模块；和
• 不那么单一，没有“神”配置类。