Вложенная реактивная форма в 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.

Увидимся!

======================================