Угловые формы: лучшие практики для сложных вложенных реактивных форм и проверки в корневом компоненте

Сложные формы в Angular могут быть большой проблемой. По моему опыту, лучший подход - создать родительский компонент с сохранением состояния и множество дочерних компонентов без состояния.

Родительский компонент должен быть выделен для определенной формы. Дочерние компоненты можно многократно использовать повсюду много раз.

Правила родительского компонента:

• сохранный
• создает и удерживает определение формы
• испускает состояние формы (значение, действительный, нетронутый) при каждом изменении формы
• содержит настраиваемую логику проверки

Правила для дочерних компонентов:

• без гражданства
• получает части формы (вложенные FormGroups) от родителя
• нет настраиваемой логики проверки

В приведенном выше сценарии дочерние компоненты представляют собой «повторно используемые представления» без какой-либо логики проверки. Это всегда будет исходить от родителей.

Как передать детали формы дочерним компонентам?

Вы можете передать вложенные FormGroups следующими способами:

• через Input (https://github.com/p-programowanie/angular-forms/tree/forms-form-group)
• через ControlContainer и внедрение конструктора (https://github.com/p-programowanie/angular-forms/tree/forms-control-container)
• через ControlContainer и viewProvider инъекции (https://github.com/p-programowanie/angular-forms/tree/forms-control-container-provider)

ControlValueAccessor

На мой взгляд, использование 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)

Я обнаружил, что лучше всего создать одну специализированную службу со всей логикой и структурой форм. Все проверки, зависимости, подписки, заполнение групп формы и массива есть. Таким образом, очень легко протестировать детали формы и повторно использовать их.