В компании Im, работающей для, разрабатывалось крупномасштабное приложение с несколькими формами, которое пользователь должен заполнить, чтобы зарегистрироваться для нашей программы. Когда на все вопросы был дан ответ, пользователь достигает раздела, в котором суммируются все их ответы, высвечиваются недействительные ответы и дает пользователю возможность вернуться к предыдущим шагам формы и пересмотреть их ответы. Эта логика будет повторяться в разных разделах верхнего уровня, каждая из которых имеет несколько шагов/страниц и сводную страницу.
Для этого мы создали компонент для каждого отдельного шага формы (такие категории, как "Личные данные" или "Квалификации" и т.д.) вместе с их соответствующими маршрутами и компонентом для сводной страницы.
Чтобы сделать его максимально сухим, мы начали создавать "главную" службу, которая хранит информацию для всех разных шагов формы (значения, достоверность и т.д.).
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$'];
}
который выглядит как запах кода в наших неопытных глазах. У нас есть серьезные проблемы с тем, как масштабируемое приложение будет масштабироваться, учитывая количество разделов, которые мы будем иметь в конце.
Мы обсуждали разные решения, но мы не можем придумать тот, который использует механизм формы Angular s, позволяет нам сохранить нашу иерархию проверки целостности и также просто.
Есть ли лучший способ достичь того, что пытались сделать?
