Question

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

任何人都可以帮助我，我需要表格仅提交一组选定的用户ID。

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

编辑这是具有多个选择（国家/地区）的类似形式的日志： console log

我需要users（复选框）来返回像countries（多次选择）这样的数组，如上面的日志所示。

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

因此，碰巧我一直在思考解决方案，以为像多选一样，复选框将/将返回准备好的选择项数组。

一个相当简单的解决方案是通过阅读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动态复选框键值返回ID数组

2 个答案: