В этом посте предполагается, что у вас есть хотя бы некоторые практические знания о реактивных формах Angular.

Допустим, это наша структура:

Нам нужно преобразовать это в угловую форму. Наша цель - отобразить список навыков с флажком, который будет отключен / отмечен в зависимости от ключа selected для каждого навыка.

Создадим форму:

Наша форма - это просто группа с одним ключом - skills.

Метод buildSkills() отвечает за:

  1. Создайте массив FormControls с начальным значением на основе ключа selected для каждого навыка.
  2. Передайте массив в FormArray.

Остановимся на секунду и узнаем окончательную структуру без form builder.

Теперь мы можем написать HTML.

Код прост. Мы просто перебираем элементы управления навыков и привязываем каждый навык к флажку.

Совет: мы можем использовать index для отображения дополнительной информации, например названия навыка.

Последний шаг - сопоставить значение формы с чем-то, что мы можем отправить на наш сервер.

Вы можете увидеть подход, основанный на шаблонах, в моей шпаргалке по формам.

🚀 На случай, если вы это пропустили

  • Акита: государственное управление, специально разработанное для JS-приложений
  • Spectator: мощный инструмент для упрощения ваших угловых тестов
  • Transloco: библиотека интернационализации Angular

Вы можете играть с кодом здесь.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!