9
在我工作的，我们正在开发多种形式的大规模应用，用户需要填写，以便为我们的程序注册公司。当所有问题都得到解答后，用户就会到达一个总结所有答案的部分，突出显示无效答案，并让用户有机会重新访问任何前面的表单步骤并修改答案。该逻辑将在一系列顶级部分中重复出现，每个部分都有多个步骤/页面和一个摘要页面。角2 - 大规模的申请表格处理
为了实现这一点，我们已经创建了每个单独步骤的形式的组分（它们是类别，如“个人信息”或“资格”等）与它们各自的路线沿着和用于摘要页面的部件。
为了保持尽可能干燥，我们开始创建一个“主”服务，适用于所有不同形式的步骤（值，有效性等）的信息。
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形式绑定，通过，以及通过摘要页面访问相应对象密钥和创建嵌套形式组的服务，其表示层仅受单向约束（模型 - >视图）。
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$'];
}
这似乎是在我们缺乏经验的眼睛代码味道。考虑到我们最终将拥有的部分数量，我们对这样的应用程序如何扩展会有强烈的担忧。
我们已经讨论了不同的解决方案，但我们不能拿出一个利用角的形式引擎，使我们能够保持我们的验证层次结构完好无损，也很简单。
有没有更好的方法来实现我们正在尝试做的事情？
谢谢@ovangle！我认为你的建议非常接近我想要达到的目标，并提供足够的思考。 – Manolis