Angular 6 个动态复选框键值 return ID 数组

Question

我有一个使用 returns 对象的键值管道的动态复选框列表，而不仅仅是 selected ID 数组。

任何人都可以帮忙吗，我需要表单来提交一组 selected 用户 ID。

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

编辑这是带有多个select（国家/地区）的类似表格的日志： console log

我需要 users（复选框）到 return 像上面日志中的 countries（多 select）这样的数组。

Answer 1

将您的 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

如果您想以表单形式提交，请在表单中添加一个隐藏字段

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

从 onSubmit 设置值 selectedUserIds 并提交表单代码。

Answer 2

所以，碰巧我一直在想像多选一样的解决方案，复选框 would/could return 已选项目的现成数组。

相当简单的解决方案是阅读 Eliseo 的另一篇帖子并结合 Jaba Prince 的回答：

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

  }

非常感谢你们两位！

Angular 6 个动态复选框键值 return ID 数组

Angular 6 dynamic checkboxes keyvalue return array of IDs

arrays

key-value

angular

angular-reactive-forms

angular6