В этом посте предполагается, что у вас есть хотя бы некоторые практические знания о реактивных формах Angular.
Допустим, это наша структура:
Нам нужно преобразовать это в угловую форму. Наша цель - отобразить список навыков с флажком, который будет отключен / отмечен в зависимости от ключа selected
для каждого навыка.
Создадим форму:
Наша форма - это просто группа с одним ключом - skills
.
Метод buildSkills()
отвечает за:
- Создайте массив
FormControls
с начальным значением на основе ключаselected
для каждого навыка. - Передайте массив в
FormArray
.
Остановимся на секунду и узнаем окончательную структуру без form builder
.
Теперь мы можем написать HTML.
Код прост. Мы просто перебираем элементы управления навыков и привязываем каждый навык к флажку.
Совет: мы можем использовать index
для отображения дополнительной информации, например названия навыка.
Последний шаг - сопоставить значение формы с чем-то, что мы можем отправить на наш сервер.
Вы можете увидеть подход, основанный на шаблонах, в моей шпаргалке по формам.
🚀 На случай, если вы это пропустили
- Акита: государственное управление, специально разработанное для JS-приложений
- Spectator: мощный инструмент для упрощения ваших угловых тестов
- Transloco: библиотека интернационализации Angular
Вы можете играть с кодом здесь.
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!