Angular 6动态复选框键值返回ID数组答案

【问题标题】：Angular 6 dynamic checkboxes keyvalue return array of IDsAngular 6动态复选框键值返回ID数组
【发布时间】：2019-08-11 01:03:04
【问题描述】：

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

谁能帮忙，我需要表单来提交一组选定的用户 ID。

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

编辑这是具有多选（国家）的类似表格的日志： console log

我需要users（复选框）返回一个数组，如上面的日志中的countries（多选）。

【问题讨论】：

随便console.log(Object.keys(this.userForm.value.users));
stackoverflow.com/questions/54984196/…。提示，有时它是 utils 写入 .html {{myform?.value|json}} 来检查表单的值
谢谢，但这并没有帮助。我已经更新了问题。

标签： arrays angular angular6 key-value angular-reactive-forms

【解决方案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 的值并提交表单代码。

【讨论】：

感谢您的回答，我之前能够做到这一点，但问题仍然是表单提交对象。我尝试使用 setValue、patchValue 更新表单，但似乎都不起作用。我需要表单来提交 ID 数组。有什么想法吗？我是不是把这一切都搞错了？
将按钮类型更改为 type="submit"，表单提交在 stackblitz.com 中可能不起作用

【解决方案2】：

所以，碰巧我一直在考虑解决方案，就像多选一样，复选框会/可以返回一个准备好的选定项目数组。

相当简单的解决方案是阅读 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

  }

非常感谢你们两位！

【讨论】：

如果对您有帮助，您可以投票并喜欢答案:)