Angular 6 динамических флажков keyvalue возвращают массив идентификаторов

Question

У меня есть список динамических флажков, использующих канал значения ключа, который возвращает объекты, а не просто массив выбранных идентификаторов.

Может кто-нибудь помочь, пожалуйста, мне нужна форма для отправки только массив выбранных идентификаторов пользователей.

https://stackblitz.com/edit/angular-ciaxgj

EDIT Вот журнал аналогичной формы с множественным выбором (страны): консольный журнал

Мне нужно users (флажки), чтобы вернуть массив, такой как countries (множественный выбор), как в журнале выше.

Answer 1

Таким образом, случается так, что я обдумываю решение, думая, что, как и множественный выбор, флажки будут / могут возвращать готовый массив выбранных элементов.

Довольно простым решением было прочесть еще один пост Элисео в сочетании с ответом Джабы Принса:

onSubmit() {
    var usersObj = this.userForm.value.users;
    var selectedUserIds = [];
    for (var userId in usersObj) {
        if (usersObj.hasOwnProperty(userId)) {
          if(usersObj[userId])//If selected
          {
              selectedUserIds.push(userId);
          }

        }
    }

    let data = {
      users: selectedUserIds
    }

    console.log(data);

    // post data in service call

  }

Большое спасибо вам двоим!

Answer 2

Измените функцию OnSubmit на

onSubmit() {
    console.log(this.userForm.value);
    var usersObj = this.userForm.value.users;
    var selectedUserIds = [];
    for (var userId in usersObj) {
        if (usersObj.hasOwnProperty(userId)) {
          if(usersObj[userId])//If selected
          {
              selectedUserIds.push(userId);
          }

        }
    }
    console.log(selectedUserIds);
  }

Вот обновленный код

https://stackblitz.com/edit/angular-9fd17t

Если вы хотите отправить форму, добавьте скрытое поле вform

<input type="hidden" name="selectedUserIds" value=""/>

установить значение selectedUserIds из onSubmit и отправить код формы.