Javascript 如何提交某种类型的表单

我需要提交一份特定类型的表格

我想这样，这就是服务器想要创建一个具有访问权限的用户

{
    "archived": false,
    "client": 1,
    "first_name": "Foo",
    "id": 5066549580791808,
    "inactive": false,
    "last_name": "Bar",
    "mail": "admin@gmail.com",
    "middle_name": "Middle",
    "role": {
        "name": "CLIENT",
        "unlocks": [
            "FIXTURE_READ",
            "FIXTURE_FLIP",
            "FIXTURE_LOCATE""
        ]
    }
}

我的chrome控制台里有

unlocks: Array(3)
0: "FIXTURE_READ"
1: "FIXTURE_FLIP"
2: "FIXTURE_LOCATE"
length: 3
__proto__: Array(0)
email: "admin@gmail.com"
f_name: "seb"
l_name: "seb"
m_name: "seb"
password: "mysuperpassword"
role: "CLIENT"

它看起来像一个带有数组的对象 你有办法解决我的问题吗

我的提交功能最容易理解

 onSubmit() {
    if (this.form.valid) {
      this.dataSource.data.push(this.form.value);
      this.dataSource.data = [...this.dataSource.data];
  }

试试这个：

---

parse（form.value）

我想你有一些

submit()
{
   if (form.isvalid)
      this.myservice.sendData(this.form.value)

}

因此，在发送表单之前，请使用这些值动态创建一个对象

submit()
{
   if (form.isvalid)
   {
      const obj={
        unlocks:form.value.unlocks,
        first_name:form.value.f_name,
        ...
      }

     this.myservice.sendData(obj).subscribe(res=>console.log(res))
   }
}

更新另一个位置：

你有服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {

  constructor(private httpClient:HttpClient) { }
  sendData(data:any)
  {
    return this.httpClient.post("http:/your.url.com",data)
  }
}

在您的组件中，其中有表单，在构造函数中

  constructor(private myService:MyService) { }

---

请解释如何获得实际输出请共享一些代码以显示表单的外观，以便其他人可以查看并回答。我将其放置在何处？我将提交函数放置在post中，如下所示：this.dataSource.data.push（JSON.parse（this.form.value））；我只是不明白如何在我的功能中使用它，对不起。什么是myservice和sendData？更新响应。请注意订阅sendData是必要的-我忘了-