У меня есть пара страниц (две или больше), каждая из которых содержит форму. Эта форма имеет много (скажем, около пятидесяти) элементов управления внутри. Однако некоторые (два или три) элемента управления отличаются от другой формы.
например,
PageA.component. html
- Форма A
- Form Control (вводимый текст)
- Form Control (кнопка)
- Form Control (активная кнопка)
- ... (еще почти сотни форм элементы управления)
Компонент PageB. html
- Форма B
- Элемент управления формой (ввод текста)
- Form Control (кнопка)
- Form Control (отключенная кнопка)
- ... (еще почти сотни элементов управления формой)
Я думаю о двух подходах к его реализации:
Первый - реализовать несколько страниц (с несколькими формами соответственно), как показано на иллюстрации выше. Плюсы в том, что реализация будет прямой и простой. Минус в том, что он будет содержать огромное количество шаблонного кода для одинаковых элементов управления формой и логики приложения c.
Второй - реализовать несколько страниц, которые используют один и тот же дочерний компонент с элементами управления формой. И указанный c лог приложения c будет добавлен к тем элементам управления формы, которые различаются между страницами. Плюсы в том, что это сокращает шаблонный код. Минус в том, что взаимодействие между родительским и дочерним компонентами может стать сложным, поскольку оно включает в себя большое количество элементов управления формой.
например,
PageA.component. html
<form [formGroup]='myFormGroup'>
<app-my-custom-child-with-form-controls [input-data-to-differentiate-page-b]='some-A-data'></app-my-custom-child-with-form-controls>
</form>
PageB.component. html
<form [formGroup]='myFormGroup'>
<app-my-custom-child-with-form-controls [input-data-to-differentiate-page-a]='some-B-data'></app-my-custom-child-with-form-controls>
</form>
ps: Angular Будет принято 7 реактивных форм
Извините, что для меня довольно абстрактно описывать проблему очень ясно. Пожалуйста, дайте мне знать, если необходимы дополнительные разъяснения.
Заранее большое спасибо!