Вложенная реактивная форма в Angular
Давайте поговорим о том, что нам нужно импортировать для вложенной реактивной формы.
Во-первых, нам нужно импортировать ReactiveFormsModule, который доступен в пакете angular / forms. Теперь вы можете приступить к написанию формы в своем приложении.
Теперь вам нужно начать сборку любого файла компонента.
Перейдем к файлу компонента.
Пояснение к компонентному файлу Построчно:
Строка 2: В строке 2 нам нужно импортировать FormGroup, который является экземпляром, отслеживающим состояние формы группы элемента управления формой. Каждый элемент управления в экземпляре группы форм отслеживается по имени при создании группы форм.
FormArray, который используется для сообщения FormGroup, что элемент управления формой является экземпляром массива и может содержать несколько элементов formControl в форме.
FormBuilder, который используется для создания экземпляров FormControl
, FormGroup
или FormArray
.
Строка 12–13: Строка 12, мы должны создать переменную formGroup для сообщения angular, это основная группа формы. В строке 13 мы просто экземпляр FormBuilder.
Строка 14–19: Теперь нам нужно создать экземпляр нашей формы. Но в строке 18 объявляется ключ phone для массива, который сообщает, что ключ телефона может содержать несколько элементов управления формой, и это будет массив.
Строка 24–29: Строка 24, мы просто создаем функцию, которая возвращает нашу группу форм для клавиши телефона.
Строка 31: здесь будет весь ключ, доступный в массиве ключей телефона.
Теперь давайте создадим HTML-код этой формы:
Объяснение основных строк в файле HTML.
Строка 9–21: Строка 9, я говорю, что на телефоне есть экземпляр FormArray. Строка 10, я получаю контроль всей формы для всей группы форм массива телефонов и зацикливаю, используя структурные директивы (* ngFor), и даю экземпляр FormGroupName, который входит в FormGroup, или сообщаю FormGroup, что ключ телефона является дочерними элементами формы. Строка 17, если вы хотите удалить какую-либо часть телефонного массива, чтобы использовать ее. Строка 21. Создайте функцию для добавления дополнительных разделов в массив ключей телефона.
Спасибо за прочтение.
=======================================
Вы можете подписаться на меня в linkedin или twitter.
Увидимся!
======================================