Javascript 在api上提交表单的Post方法

角8上有一个表格

my-form.component.html

<div class="container">
<form novalidate [formGroup]="registrationForm">
    <div class="form-group">
        <label for="firstName">Имя:</label>
        <input #spy required pattern=[A-Za-zА-Яа-яЁё]{2,} name="firstName" id="firstName" type="text" class="form-control" formControlName="firstName">
    </div>
    <div class="form-group">
        <label for="lastName">Фамилия:</label>
        <input #spy required pattern=[A-Za-zА-Яа-яЁё]{2,} name="lastName" id="lastName" type="text" class="form-control" formControlName="lastName">
    </div>
    <div class="form-group">
        <label for="email">E-mail:</label>
        <input #spy required email name="email" id="email" type="email" class="form-control" formControlName="email">
    </div>
    <!--{{ spy.className }}-->
    <button type="submit" class="btn btn-succes" (click)="submit(myForm)">Отправить</button>
</form>

---

似乎无法在提交函数中获取表单值。 将单击事件从

（单击）=“提交（myForm）”

更改为

（单击）=“提交（myForm.value）”

，然后在提交函数中可以调用post方法

submit(formValueObject) {
    console.log(formValueObject);
    this.httpService.post(url, formValueObject).subscribe((res:any)=> {
      //your response
    })
  }

---

我希望这对你有帮助，我有一个简单的例子给你

----html----

标题
请给出标题！！
身体
请
给我身体！！
用户ID
请提供用户ID！！
----ts----
从'@angular/forms'导入{NgForm}；
@ViewChild（'send'）send:NgForm；
构造函数（私有sendData:HttpService）{
}
sendFRMData（数据：任意）{
常数有效载荷={
标题：data.titlefrm，
正文：data.bodyfrm，
userId:data.userIdfrm
}
this.sendData.try（有效负载）.subscribe(
（数据：任何）=>{
this.respondedData=JSON.stringify（数据）；
this.alert=true；
}
);
}
----服务----
try（数据）{
返回
this.http.post（'https://jsonplaceholder.typicode.com/posts",数据,{
标题：{
“内容类型”：“应用程序/json；字符集=UTF-8”
}
});
}

---

希望您能得到答案…

添加ts代码问题是什么？对不起，我英语说得不好。问题是您需要使用POST向API发送表单数据method@NurdauletAdilkhan尝试探索

submit(formValueObject) {
    console.log(formValueObject);
    this.httpService.post(url, formValueObject).subscribe((res:any)=> {
      //your response
    })
  }

----html----

<header class="masthead">
   <div class="container h-100">
       <div class="row h-100 align-items-center justify-content-center">
           <div class="col-6">
               <div class="text-center">
                   <hello name="{{ name }}"></hello>
                    <hr>
            </div>
            <form #send="ngForm" (ngSubmit)="sendFRMData(send.value)">
                <div class="form-group">
                    <label for="title" class="text-muted">Title</label>
                <input type="text" class="form-control" id="title" 
name="titlefrm" ngModel #title='ngModel' required>
      <span class="help-block text-danger" *ngIf="!title.valid && 
title.touched">Please give Title!!</span>
      </div>
      <div class="form-group">
                    <label for="body" class="text-muted">Body</label>
<input type="text" class="form-control" id="body" name="bodyfrm" ngModel 
#body='ngModel' required>
<span class="help-block text-danger" *ngIf="!body.valid && 
body.touched">Please 
give Body!!</span>
      </div>
      <div class="form-group">
                    <label for="userId" class="text-muted">UserID</label>
<input type="text" class="form-control" id="userId" name="userIdfrm" ngModel 
#userid='ngModel' required>
<span class="help-block text-danger" *ngIf="!userid.valid && 
userid.touched">Please give UserID!!</span>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <input class="form-control btn btn-success" type="submit" 
[disabled]='!send.valid'>
        </div>
        <div class="col-sm-6">
          <input class="form-control btn btn-info" type="button" value="EDIT" 
(click) = 'onEdit()'>
        </div>
      </div>
</form>
        </div>
</div>
</div>
</header>

----ts----
import { NgForm } from '@angular/forms';
@ViewChild('send') send: NgForm;
constructor(private sendData: HttpService) {
  }
sendFRMData(data: any) {
const payload = {
  title: data.titlefrm,
  body: data.bodyfrm,
  userId: data.userIdfrm
}
this.sendData.try(payload).subscribe(
  (data: any) => {
    this.respondedData = JSON.stringify(data);
    this.alert = true;
  }
);
}

----service----

try(data){ 
return 
this.http.post('https://jsonplaceholder.typicode.com/posts',data,{
headers: {
    "Content-type": "application/json; charset=UTF-8"
       }
   });
}