在我工作的公司,我们正在开发一个具有多种形式的大型应用程序,用户需要填写这些应用程序才能注册我们的程序.当所有问题都得到回答后,用户就会到达一个部分,该部分总结了所有答案,突出显示无效答案,并让用户有机会重新访问上述任何一个表格步骤并修改他们的答案.该逻辑将在一系列顶级部分中重复,每个部分具有多个步骤/页面和摘要页面.
为实现这一目标,我们为每个单独的表单步骤(它们是"个人详细信息"或"资格"等类别)创建了一个组件,以及它们各自的路由和摘要页面的组件.
为了尽可能保持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: …Run Code Online (Sandbox Code Playgroud)