Угловые дочерние формы управления / групповые значения и ошибки пузыриваются до родителя

Question

Мое требование : один FormControl должен содержать ответ нескольких входных данных ( несколько дочерних FormControls или FormGroups ).

Это связано с тем, что несколько элементов управления должны вводиться вFormControl верхнего уровня (родительский) и значение FormControl родительского уровня должны быть отфильтрованы / обработаны для соответствия требуемому формату.

Хорошим примером может служить разделенный телефонный вход с раскрывающимся списком кодов страны , телефонный номер и добавочный номер , всебыть отдельно друг от друга, но вместе в FormGroup.При изменении любого из этих входных значений значение FormControl родительского уровня также должно измениться.

В дополнение к значениям всплывающее вверх, ошибки дочерних элементов управления должны всплывать и до родительского FormControl.

Прямо сейчас яродительский FormControl должен прослушивать изменения значений FormGroup с помощью кода страны, номера телефона и добавочных номеров.Затем, используя ControlValueAccessor для компонента, который записывает значение родительского FormControl, когда FormGroup ValueChanges.

Мне нужен способ для достижения желаемого результата, но также способ сделать еще более сложные элементы управления и FormGroups.Подумайте о нескольких степенях вложенных FormControls и / или FormGroups.

Окружающая среда

• Угловая 7
• Материал 7
• NGRX 6

Answer 1

Изначально пытаясь придумать хорошее решение для разбивки огромных форм на подформы (подкомпоненты ...), мы придумали решение для этого, но также , чтобы иметь доступ к вложеннымошибки.

Мы создали библиотеку для этого https://github.com/cloudnc/ngx-sub-form, которая даст вам больше, чем просто доступ к вложенным ошибкам, и вы можете проверить официальную демонстрацию здесь: https://cloudnc.github.io/ngx-sub-form/listings/new (отредактируйте форму и увидите отображаемые ошибки)

Я также ответил на аналогичный вопрос SO здесь https://stackoverflow.com/a/56375605/2398593 и создал демонстрационную версию для этого вопроса здесь (которая также демонстрирует функциональность вложенных ошибок) https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling

Надеюсь, это поможет!

Редактировать:

Если вы хотите пойти дальше, я только что опубликовал пост в блоге, чтобы объяснитьздесь много всего о формах и ngx-sub-формах https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9