Использование дочерних компонентов в угловых формах
Формы всегда сложнее, чем кажется. Особенно в сегодняшнем сложном веб-интерфейсе. Есть несколько различных типов форм с большим количеством взаимодействий, которые происходят за кулисами. Логины пользователей, тележки для покупок и профили в социальных сетях - это лишь некоторые из них. Я хотел продемонстрировать, как реализовать конкретный сценарий, который может быть не таким простым с формами Angular. Использование дочерних компонентов.
В Angular есть два типа форм. Формы на основе шаблонов и моделей, также известные как «реактивные» формы. Формы на основе шаблонов являются более простыми и кажутся перенесенными со времен Angular JS. Реактивные формы - более современный способ справиться с вещами. Они позволяют вам создать модель данных вашей формы в компоненте, а затем привязать ее к шаблону. В этой статье предполагается, что вы уже знакомы с построением форм с помощью Angular. При использовании дочерних компонентов в формах рабочий процесс обычно выглядит примерно так:
1. Импортируйте ReactiveFormsModule в свой app.module.ts
2. Создайте новый FormGroup в родительском компоненте
* Обратите внимание, что мы также создаем подписчика для прослушивания изменений в форме. Это используется в этом примере, чтобы доказать, что наша форма работает.
3. Свяжите эти поля с элементами формы шаблона с помощью formControlName
Звучит довольно просто, правда?
Может быть. Пока вы не захотите использовать функцию номер один Angular, компоненты. Посмотрим, как это делается.
Заметили что-нибудь странное в этой форме?
Посмотрите, что происходит в этой строке:
Здесь мы используем дочерний компонент. Само по себе это не так уж и странно, но ключевым моментом здесь является входной параметр, который мы используем. Созданный нами ранее parentForm передается потомку.
Вы можете видеть, что здесь мы используем обычное свойство formControlName для входных данных, но дочерний компонент отличается. Посмотрим, что происходит внутри этого дочернего компонента.
У нас есть ввод, который принимает FormGroup, который ожидает родительскую форму. Тогда в шаблоне происходит настоящее волшебство. Похоже, мы создаем совершенно новую форму. Мы! Мы передаем всю форму в этот дочерний компонент. Теперь мы привязываем это вложенное поле ввода к элементу управления email в родительской форме.
Это не только позволяет связать дочернее входное значение с родительским компонентом, но и наоборот. Поскольку мы передаем всю форму, у нас также есть доступ ко всем свойствам формы. И это здорово, потому что теперь мы можем использовать такие значения, как parentForm.pristine или parentForm.valid , и использовать их, чтобы показывать или скрывать различные элементы пользовательского интерфейса для ваших пользователей или показывать сообщения проверки, как если бы они были в родительском компоненте. Это секретный метод, позволяющий «повторно использовать» родительскую форму.
Теперь вы знаете, как использовать дочерние компоненты в ваших реактивных формах, и возможности «составления» ваших форм безграничны.
Если вы узнали что-то новое или вам есть что добавить, дайте мне знать в разделе комментариев. Если я совершил какие-либо ошибки, определенно дайте мне знать в разделе комментариев.
** ОБНОВЛЕНИЕ: я написал аналогичную статью, в которой более подробно рассказывается о формах вложенности здесь.
Следуйте за мной в Twitter здесь.
